tl; dr 在Chrome打包应用<webview>
中查看时,在Chrome中查看时可拖动的元素无法拖动,为什么?
在Chrome 29.0.1521.3 dev上测试过,在打包应用内部时仍然没有运气,但Chrome本身运行正常。
尝试使用Chrome打包应用程序,我想测试WebView的功能...显然,WebView中加载的页面的行为应该与从Chrome本身查看的内容完全相同(除了一些功能被禁用)。
我创建了一个仅包含一个<webview>
页面的应用。内部页面显示<ol>
,其中包含三个<li>
元素。每个<li>
都有draggable="true"
属性,但无论我尝试什么,元素都不会对拖动做出任何反应。
我知道Chrome Packaged Apps有很多CSS声明可以避免用户选择文字等,但是有什么内容可以阻止被拖动的内容吗?
{
"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"
]
}
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,
});
}
<!doctype html>
<webview src="http://localhost/WebViewPage.html" style="width:100%;height:100%"></webview>
<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至少应该做一些事情,但它们根本没有反应。
答案 0 :(得分: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
所以,简短的回答是,拖动在稳定的chrome中被破坏,drop to work,至少在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>