HTML5拖放ondragover未在Chrome中觸發

Question

我在這里有一個簡單的例子，它不是在Chrome 11中為我開火http://jsfiddle.net/G9mJw/ ，它包含一個非常簡單的代碼：

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}


dropzone.addEventListener('dragover', onDragOver, false);

它似乎在safari中工作得很好......但是在Chrome中，當紅色方塊觸摸虛線時，不會調用dragover事件。

我試圖復制一些目前正在使用chrome的示例，但它對我來說也不起作用。

我已經嘗試阻止默認行為，如果工作但看不到它。 任何幫助將非常感激。

謝謝

Answer 1

似乎需要將一些數據設置為dragstart事件中的draggable元素，以便在dropzone上觸發dragover事件。

我已經更新了片段http://jsfiddle.net/G9mJw/20/ ，它現在也適用於chrome。

和新代碼如下：

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
}

function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}   

draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);

還有一些關於它如何工作的更多信息： https ： //developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data ，這提到的事情如下：

發生拖動時，數據必須與拖動相關聯，該拖動標識正在拖動的內容。

哪個更容易理解......我只是想弄清楚它在Safari中是如何工作的，而不需要發送一些數據？ 或者它可能已經發送了一些默認內容？

還有event.dataTransfer.setData('text/html', null); 方法，奇怪的是不能發送像event.dataTransfer.setData('text/html', '');這樣的空字符串event.dataTransfer.setData('text/html', ''); 否則將不會發送dragover事件。

Answer 2

Chrome目前僅支持一些數據類型 - 如果您的數據沒有可識別的MIME類型，則拖放操作就不會繼續。 這是很清楚違反了W3C規范，而不是在Firefox的問題（只要你提供某種形式的數據），甚至Safari瀏覽器（它允許拖動進行數據是否設置與否）。

Chromium錯誤報告位於： http ： //code.google.com/p/chromium/issues/detail？id = 93514

Answer 3

我遇到了mime類型的問題。

W3Schools有一個你可以試驗的頁面： http ： //www.w3schools.com/html/tryit.asp？ filename = tryhtml5_draganddrop2

在我將getData和setData更改為“text / html”而不是“Text”之前，他們的代碼示例對我不起作用。

我正在使用：版本34.0.1847.116 Ubuntu 14.04光環（260972）