Jak zapobiegać zakłócaniu elementów potomnych przez dragi w formacie HTML5 i upuszczać zdarzenia?

Question

Mam cel upuszczenia <div>, do którego dołączono zdarzenia "upuszczania" i "dragover". <div> zawiera obraz wewnątrz znacznika zakotwiczenia (uproszczony: <div><a><img /></a></div>). Elementy potomne celu wydają się blokować uruchamianie zdarzeń "upuszczania" lub "drago- ra". Dopiero gdy przeciągnięty element znajduje się nad celem, ale NIE nad jego elementami potomnymi, oba zdarzenia są uruchamiane zgodnie z oczekiwaniami.

Zachowanie, które chciałbym osiągnąć, polega na tym, że zdarzenia "dragover" i "drop" są uruchamiane gdziekolwiek nad celem <div>, niezależnie od istnienia elementów potomnych.

Answer 1

Coś jeszcze musi się dziać z kodem. I wyśmiewali się prosty przykład tutaj:

http://jsfiddle.net/M59j6/6/

i widać, że elementy podrzędne nie kolidują z wydarzeń.

Answer 2

Przeciągnij spec & jest poważnie wadliwy i dość trudny w obsłudze.

Dzięki śledzeniu elementów potomnych można osiągnąć oczekiwane zachowanie (elementów potomnych, które nie przeszkadzają).

Poniżej znajduje się krótki przykład jak to zrobić (z jQuery):

jQuery.fn.dndhover = function(options) { 
    return this.each(function() { 
    var self = jQuery(this); 
    var collection = jQuery(); 

    self.on('dragenter', function(event) { 
     if (collection.size() === 0) { 
     self.trigger('dndHoverStart'); 
     } 

     collection = collection.add(event.target); 
    }); 

    self.on('dragleave', function(event) { 
     collection = collection.not(event.target); 

     if (collection.size() === 0) { 
     self.trigger('dndHoverEnd'); 
     } 
    }); 
    }); 
}; 

jQuery('#my-dropzone').dndhover().on({ 
    'dndHoverStart': function(event) { 
    jQuery('#my-dropzone').addClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    }, 
    'dndHoverEnd': function(event) { 
    jQuery('#my-dropzone').removeClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    } 
}); 

Kredyty: 'dragleave' of parent element fires when dragging over children elements

Answer 3

Nieco skośne do pierwotnego pytania, ale google mój sposób tutaj zastanawiać, co następuje :

jak mogę dokonać <img />, który jest dzieckiem <div draggable="true">...</div> pojemniku, zachowują się poprawnie jako wi rączką który chcesz przenieść ten pojemnik?

Proste: <img src="jake.jpg" draggable="false" />

Answer 4

można wyłączyć wskaźnik-wydarzenia w CSS dla wszystkich dzieci.

.targetDiv * { 
    pointer-events: none; 
}