Вопрос по drag-and-drop, jquery, javascript, events, jquery-events – Событие отбрасывания не запускается в 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 событие.

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

По-прежнему нельзя, по крайней мере при перетаскивании изображений на него в последней версии Chrome. NoBugs
Для реагирования вам нужно добавить обработчик onDragOver к тому же элементу. H0WARD
вам нужен ondragenter начиная с Chrome 62, так как ondragover будет срабатывать только после последующих перемещений мыши, поэтому вы не будете вызывать e.preventDefault (), из-за чего событие drop иногда не срабатывает zupa
Ты неОн не нужен, только он. access_granted

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