draggable="true" isn't working inside Chrome Packaged App's

Question

tl;dr an element that is draggable when viewed in Chrome isn't draggable when viewed in Chrome Packaged App's <webview>, why?

EDIT:

Tested on Chrome 29.0.1521.3 dev, still no luck when inside packaged app, but Chrome itself works fine.

Experimenting with Chrome Packaged Apps, I wanted to test the capability of the WebView... Apparently, pages loaded within the WebView should behave exactly as if it was being viewed from Chrome itself (apart from a few features being disabled).

I made an app that consisted solely of a page with a single <webview>. The inner page shows an <ol> with three <li> elements. Each <li> has the draggable="true" attribute, but no matter what I try, the elements do not react at all to a drag.

I know Chrome Packaged Apps have many CSS declarations to avoid the user selecting text, etc. but is there anything in there to stop things being dragged?

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>

The above LIs should at least do something when the user drags them, but they don't react at all.

Will you give it another try on a canary build? The webview team has been doing a bunch of work with dragging over the past few weeks, and they've landed several patches. — sowbug, May 20 '13 at 13:41
@sowbug sorry, I'm a developer and therefore use Linux (joke). But seriously ... Canary isn't available for Linux? Who makes that decision? — Greg, May 20 '13 at 15:01
Greg: there was some technical reason that a very frequently updating channel was either hard or impossible on most Linux distros. I'll try to find out the details. Are you at least on dev? The new build usually comes out on Tuesdays. — sowbug, May 22 '13 at 14:02
Yeah I'm on dev, but there's no sign of draggable working in the app — Greg, May 22 '13 at 21:00

score 1 · Answer 1 · edited May 21 '13 at 10:25

I see what you mean, this sample works for me in

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1512.0 Safari/537.36

but not in

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.3

So, the short answer is that drag is broken in stable chrome, drop works, on Windows XP at least.

<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>

"they don't react at all" means there is no indication that I'm dragging - nothing. If you watched the screen, it would look like the mouse was simply moving over the app, not dragging at all. — Greg, May 21 '13 at 10:23
OK, that confirms what I am seeing in stable Google Chrome too. — stackunderflow, May 21 '13 at 10:50