3

tl;dr在 Chrome 中查看时可拖动的元素在 Chrome 打包应用程序中查看时不可拖动<webview>，为什么？

编辑：

在 Chrome 29.0.1521.3 dev 上测试，在打包的应用程序中仍然没有运气，但 Chrome 本身工作正常。

尝试使用 Chrome 打包应用程序，我想测试 WebView 的功能......显然，在 WebView 中加载的页面的行为应该与从 Chrome 本身查看它的行为完全相同（除了一些功能被禁用）。

我制作了一个应用程序，该应用程序仅包含一个页面和一个<webview>. 内页显示一个<ol>包含三个元素的<li>元素。每个<li>都有draggable="true"属性，但无论我尝试什么，元素都不会对拖动做出反应。

我知道 Chrome 打包应用程序有许多 CSS 声明来避免用户选择文本等，但是那里有什么可以阻止东西被拖动吗？

清单.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"
  ]
}

主.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,
    });
}

测试.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 至少应该在用户拖动它们时做一些事情，但它们根本没有反应。

4

1 回答 1

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

因此，简短的回答是，至少在 Windows XP 上，稳定的 chrome 中的拖动被破坏了，drop 可以工作。

<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>
于 2013-05-20T19:06:44.047 回答