draggable=true не работает внутри ‹webview› пакетного приложения Chrome.

tl;dr элемент, который можно перетаскивать при просмотре в Chrome, нельзя перетаскивать при просмотре в пакетном приложении Chrome <webview>. Почему?


РЕДАКТИРОВАТЬ:

Протестировано на Chrome 29.0.1521.3 dev, по-прежнему не повезло, когда внутри упакованного приложения, но сам Chrome работает нормально.


Экспериментируя с упакованными приложениями Chrome, я хотел проверить возможности WebView... По-видимому, страницы, загруженные в WebView, должны вести себя точно так же, как если бы они просматривались из самого Chrome (за исключением нескольких отключенных функций).

Я сделал приложение, состоящее исключительно из страницы с одним <webview>. Внутренняя страница показывает <ol> с тремя элементами <li>. Каждый <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,
    });
}

Тест.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 должны хотя бы что-то делать, когда пользователь перетаскивает их, но они никак не реагируют.


person Greg    schedule 19.05.2013    source источник
comment
Вы попробуете еще раз построить канареечную сборку? Команда веб-просмотра проделала большую работу с перетаскиванием за последние несколько недель и выпустила несколько исправлений.   -  person sowbug    schedule 20.05.2013
comment
@sowbug извините, я разработчик и поэтому использую Linux (шутка). А если серьезно... Canary не доступен для Linux? Кто принимает это решение?   -  person Greg    schedule 20.05.2013
comment
Грег: по какой-то технической причине канал с очень частыми обновлениями был либо затруднен, либо невозможен в большинстве дистрибутивов Linux. Постараюсь узнать подробности. Ты хотя бы на dev? Новый билд обычно выходит по вторникам.   -  person sowbug    schedule 22.05.2013
comment
Да, я в разработке, но в приложении нет никаких признаков перетаскивания.   -  person Greg    schedule 23.05.2013
comment
Проверено на 29.0.1521.3 dev, все еще не повезло   -  person Greg    schedule 04.06.2013


Ответы (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, перетаскивание работает, по крайней мере, в 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>
person stackunderflow    schedule 20.05.2013
comment
никак не реагируют значит нет никаких признаков того что я тащусь - ничего. Если бы вы смотрели на экран, казалось бы, что мышь просто перемещается по приложению, а не перетаскивает его вообще. - person Greg; 21.05.2013
comment
Хорошо, это подтверждает то, что я вижу и в стабильном Google Chrome. - person stackunderflow; 21.05.2013
comment
Я все еще не вижу поддержки "draggable" в Chrome 29. - person Greg; 13.06.2013