बाल तत्वों को एचटीएमएल 5 ड्रैगओवर और ड्रॉप घटनाओं के साथ हस्तक्षेप से कैसे रखा जाए?

Question

मेरे पास <div> ड्रॉप लक्ष्य है जिसे मैंने 'ड्रॉप' और 'ड्रैगओवर' ईवेंट संलग्न किया है। <div> में एक एंकर टैग के अंदर एक छवि है (सरलता से: <div><a><img /></a></div>)। लक्ष्य के बच्चे तत्व 'ड्रॉप' या 'ड्रैगओवर' घटनाओं को ट्रिगर होने से अवरुद्ध करते हैं। केवल तभी जब ड्रैग किया गया तत्व लक्ष्य पर है, लेकिन अपने बच्चे के तत्वों पर नहीं, दोनों घटनाएं अपेक्षित रूप से ट्रिगर होती हैं।

मैं जिस व्यवहार को हासिल करना चाहता हूं वह यह है कि बच्चे के तत्वों के अस्तित्व के बावजूद लक्ष्य <div> पर कहीं भी 'ड्रैगओवर' और 'ड्रॉप' ईवेंट ट्रिगर किए जाते हैं।

Answer 1

आपके कोड के साथ कुछ और चलना चाहिए। मैं यहाँ एक सरल उदाहरण मज़ाक उड़ाया:

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

और आप देख सकते हैं कि बच्चे तत्वों की घटनाओं के साथ हस्तक्षेप नहीं करते।

Answer 2

ड्रैग & ड्रॉप स्पेक गंभीर रूप से त्रुटिपूर्ण है और साथ काम करने में काफी मुश्किल है।

बाल तत्वों को ट्रैक करके संभावित व्यवहार (बच्चे-तत्वों में हस्तक्षेप नहीं करना) प्राप्त करना संभव है।

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; 
    } 
}); 

क्रेडिट::

नीचे कैसे (jQuery के साथ) यह करने के लिए की एक छोटी सी उदाहरण है 'dragleave' of parent element fires when dragging over children elements

Answer 3

कुछ हद तक मूल प्रश्न के लिए परोक्ष है, लेकिन मैं यहाँ अपने रास्ते googled निम्नलिखित सोच :

मैं एक <img /> है, जो एक <div draggable="true">...</div> कंटेनर के बच्चे है करते हैं, एक संभाल वाई के रूप में ठीक से व्यवहार वें उस कंटेनर को स्थानांतरित करने के लिए?

सरल: <img src="jake.jpg" draggable="false" />

Answer 4

आप सभी बच्चों के लिए सीएसएस में सूचक-घटनाओं निष्क्रिय कर सकते हैं।

.targetDiv * { 
    pointer-events: none; 
}