HTML5 Drag and Drop не работает в Chrome - PullRequest
Новая
       90

HTML5 Drag and Drop не работает в Chrome

8 голосов
/ 26 июня 2011

У меня есть простой пример, который не запускается для меня в 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);

Кажется, что это нормально работает в сафари, хотя ... но в Chrome событие dragover не вызывается, когда красный квадрат касается точечного.

Я попытался воспроизвести некоторые примеры, в которых это работает в настоящее время в Chrome, но у меня это тоже не работает.

Я пытался предотвратить поведение по умолчанию, чтобы увидеть его, если оно работает, но это не так. любая помощь будет принята с благодарностью.

спасибо

Ответы [ 3 ]

11 голосов
/ 26 июня 2011

Похоже, что необходимо установить некоторые данные для перетаскиваемого элемента в событии dragstart, чтобы событие 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', '');, иначе событие dragover не будет отправлено.

4 голосов
/ 16 февраля 2012

Chrome в настоящее время поддерживает только несколько типов данных - если ваши данные не имеют распознанного MIME-типа, перетаскивание просто не продолжается. Это явно нарушает спецификацию W3C и не является проблемой в Firefox (если вы предоставляете некоторые данные) или даже в Safari (который позволяет перетаскивать данные, независимо от того, установлены данные или нет). нет).

Отчет об ошибке Chromium здесь: http://code.google.com/p/chromium/issues/detail?id=93514

0 голосов
/ 27 июня 2014

У меня были проблемы с типами пантомимы.

В W3Schools есть страница, с которой можно поэкспериментировать: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

Их пример кода не будет работать для меня, пока я не изменил getData и setData на «text / html» вместо «Text».

Я использую: Версия 34.0.1847.116 Ubuntu 14.04 aura (260972)

...