web-dev-qa-db-fra.com

Abandonne l’événement ne se déclenche pas chrome

Il semble que l'événement drop ne se déclenche pas comme prévu.

Je suppose que l'événement drop est déclenché lorsqu'un élément en cours de glissement est des versions supérieures à l'élément cible, mais cela ne semble pas être le cas.

Qu'est-ce que je comprends mal?

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');
})
javascriptjqueryeventsdrag-and-dropjquery-events
78
Mild Fuzz

Pour que l'événement drop se produise sur un élément div, vous devez annuler les événements ondragenter et ondragover. En utilisant jquery et votre code fourni ...

$('.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();
})

Pour plus d'informations, consultez la page MDN .

170
iamchris

Vous pouvez vous contenter de faire une event.preventDefault() sur l'événement dragover. Cela déclenchera l'événement drop.

38
Michael Falck Wedelgård

Pour que l'événement drop se déclenche, vous devez affecter un dropEffect lors de l'événement over, sinon l'événement ondrop ne sera jamais déclenché:

$('.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.
0
bob