Вопрос по javascript, jquery-events, events, jquery, drag-and-drop – Событие отбрасывания не запускается в Chrome

68

Кажется, событие drop не запускается, когда я ожидал.

Я предполагаю, что событие drop срабатывает, когда перетаскиваемый элемент освобождается над целевым элементом, но это не так.

Что я недопонимаю?

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
повторяющийся вопрос:stackoverflow.com/questions/19223352/jquery-ondrop-not-firing/... bob
потенциальный ответ:stackoverflow.com/questions/8414154/... bob

Ваш Ответ

3   ответа
28

event.preventDefault() наdragover мероприятие. Делать это уволитdrop мероприятие.

Это сработало отлично, спасибо! PW Kad
Отлично! я ценю тебя, спасибо! Hajime
который имеет непокрытый крайний случай, вы также должны вызвать e.preventDefault () в dragenter, см. мой другой комментарий zupa
146

необходимо отменитьondragenter а такжеondragover Мероприятия. Используя jquery и ваш код ...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

Для получения дополнительной информации, проверьтестраница MDN.

По-прежнему не работает на последнем Chromium (Vivaldi 1.2.490.39 () (32-разрядная версия)jsfiddle.net/f282n3pt/3 mcsdwarken
работает и для HTML5 (без jquery) :) maxx777
Для реагирования вам нужно добавить обработчик onDragOver к тому же элементу. H0WARD
Вам не нужен ondragenter, только ondragver. access_granted
По-прежнему нельзя, по крайней мере при перетаскивании изображений на него в последней версии Chrome. NoBugs
0

вам нужно назначить dropEffect во время события over, иначе событие ondrop никогда не сработает:

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.
На самом деле вам нужно сделатьevent.originalEvent.dataTransfer.dropEffect = "copy" потому что JQuery использует свой собственныйevent AymKdn

Похожие вопросы