draggable="true" 在 Chrome 打包应用的 <webview> 中不起作用
Posted
技术标签:
【中文标题】draggable="true" 在 Chrome 打包应用的 <webview> 中不起作用【英文标题】：draggable="true" isn't working inside Chrome Packaged App's <webview> 【发布时间】：2013-05-14 01:44:35 【问题描述】：tl;dr在 Chrome 中查看时可拖动的元素在 Chrome 打包应用程序的 <webview> 中查看时不可拖动，为什么？
编辑：
在 Chrome 29.0.1521.3 dev 上测试，在打包的应用程序中仍然没有运气，但 Chrome 本身工作正常。
尝试使用 Chrome 打包应用程序，我想测试 WebView 的功能...显然，在 WebView 中加载的页面的行为应该与从 Chrome 本身查看它的行为完全相同（除了一些功能被禁用）。
我制作了一个应用程序，该应用程序仅包含一个带有单个 <webview> 的页面。内页显示一个带有三个 <li> 元素的 <ol>。每个<li> 都有draggable="true" 属性，但无论我尝试什么，元素都不会对拖动做出反应。
我知道 Chrome 打包应用程序有许多 CSS 声明来避免用户选择文本等，但其中有什么可以阻止东西被拖动吗？
manifest.json
"manifest_version": 2,
"name": "WebView test",
"minimum_chrome_version": "24.0.1307.0",
"version": "1.0",
"icons":
"16": "Icon_16.png",
"128": "Icon_128.png"
,
"app":
"background":
"scripts": ["Main.js"]
,
"permissions": [
"webview"
]
Main.js
chrome.app.runtime.onLaunched.addListener(function()
runApp();
);
chrome.app.runtime.onRestarted.addListener(function()
runApp();
);
function runApp()
chrome.app.window.create('Test.html',
"minWidth": 500,
"minHeight": 700,
"frame": "none",
"resizable": false,
);
Test.html
<!doctype html>
<webview src="http://localhost/WebViewPage.html" style="width:100%;height:100%"></webview>
WebViewPage.html
<ol>
<li draggable="true">One</li>
<li draggable="true">Two</li>
<li draggable="true">Three</li>
</ol>
<script>
// Returns "true":
console.log('draggable' in document.createElement('li'));
</script>
上面的 LI 至少应该在用户拖动它们时做一些事情，但它们根本没有反应。
【问题讨论】：
你会在金丝雀版本上再试一次吗？在过去的几周里，webview 团队一直在做大量的拖拽工作，他们已经发布了几个补丁。 @sowbug 抱歉，我是一名开发人员，因此使用 Linux（笑话）。但说真的...... Canary 不适用于 Linux？谁做这个决定？ Greg：有一些技术原因，在大多数 Linux 发行版上，频繁更新频道要么很难，要么不可能。我会试着找出细节。你至少在开发吗？新版本通常在星期二发布。 是的，我正在开发，但在应用中没有可拖动的迹象 在 29.0.1521.3 dev 上测试过，仍然没有运气 【参考方案1】：我明白你的意思，这个示例适用于我
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1512.0 Safari/537.36
但不在
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.3
所以，简短的回答是 drag 在稳定的 chrome 中被破坏，drop 至少在 Windows XP 上有效。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<script type="text/javascript">window.onload = function()
document.querySelector('h1#drop').addEventListener('drop', function(event)
console.log(event.type + " received by");
console.dir(event.srcElement);
if (event.dataTransfer.types && event.dataTransfer.types.length)
console.log("event.dataTransfer.getData(event.dataTransfer.types[0]) = " + event.dataTransfer.getData(event.dataTransfer.types[0]));
else
console.log('Try "Select all" before dragging...');
, false);
document.querySelector('h1#drop').addEventListener('dragover', function(event)
event.preventDefault();
console.count(event.type + " received by " + event.srcElement.id);
, false);
</script>
</head><body>
<h1 id="drag" draggable="true">Headline Draggable</h1>
<h1 id="drop" dropzone="copy">Headline Dropzone</h1>
</body></html>
【讨论】：
“他们根本没有反应”意味着没有迹象表明我在拖 - 什么都没有。如果您观看屏幕，看起来鼠标只是在应用程序上移动，根本没有拖动。 好的，这也证实了我在稳定的 Google Chrome 中看到的内容。 Chrome 29 中仍然没有"draggable" 支持。以上是关于draggable="true" 在 Chrome 打包应用的 <webview> 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥“draggable = 'true'”不能在 React 渲染组件上工作？
拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后
使用 javascript 访问 `draggable` 属性
我正在尝试将 <img id="draggable"> 附加到 $( "#draggable" ).draggable();它不工作。我怎样才能连接