ड्रॉप इवेंट क्रोम में फायरिंग नहीं

Question

ऐसा लगता है कि ड्रॉप ईवेंट ट्रिगर नहीं हो रहा है जब मैं उम्मीद करूंगा।

मुझे लगता है कि ड्रॉप ईवेंट तब भड़कता है जब किसी तत्व को खींचा जा रहा होता है, वह लक्ष्य तत्व के ऊपर होता है, लेकिन ऐसा प्रतीत नहीं होता।

मुझे क्या गलतफहमी है?

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

Comments

डुप्लीकेट प्रश्न: stackoverflow.com/questions/19223352/jquery-ondrop-not-firing/…

— bob

संभावित उत्तर: stackoverflow.com/questions/8414154/…

— बॉब

Answer 1

किसी ईवेंट तत्व पर ड्रॉप ईवेंट होने के लिए, आपको 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 पृष्ठ देखें ।

Comments

आपको ondragenter की आवश्यकता नहीं है, केवल ondragover।

— Access_granted

अभी भी एक नहीं, कम से कम जब नवीनतम क्रोम पर छवियों को खींच रहा है।

— NoBugs

अभी भी नवीनतम क्रोमियम (Vivaldi 1.2.490.39 () (32-बिट) jsfiddle.net/f282n3pt/3

— mcsdwarken

Reajj के साथ, आपको उसी हाथी पर onDragOver हैंडलर को जोड़ने की आवश्यकता है।

— CHAN

क्या html5 dnd API वास्तव में खराब है?

— bartosz.baczek

Answer 2

आप घटना event.preventDefault()पर बस कर के दूर हो सकते हैं dragover। ऐसा करने से dropइवेंट में आग लग जाएगी ।

Comments

कि एक खुला हुआ किनारा मामला है, आपको e.preventDefault () को खींचने वाले पर भी कॉल करना चाहिए, मेरी अन्य टिप्पणी देखें

— zupa

Answer 3

ड्रॉप ईवेंट के लिए आग लगाने के लिए, आपको ओवर ईवेंट के दौरान एक ड्रॉप-असाइन करने की आवश्यकता होती है, अन्यथा ऑनग्राउंड ईवेंट को कभी ट्रिगर नहीं किया जाएगा:

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

Comments

वास्तव में आपको ऐसा करने की आवश्यकता है event.originalEvent.dataTransfer.dropEffect = "copy"क्योंकि jQuery अपना स्वयं का उपयोग करता हैevent

— AymKdn 20

Answer 4

यह वास्तविक जवाब नहीं है, लेकिन मेरे जैसे कुछ लोगों के लिए, जिनके पास निरंतरता के लिए अनुशासन की कमी है। ड्रॉप क्रोम में मेरे लिए आग नहीं था जब effectAllowedमैं के लिए निर्धारित किया था प्रभाव नहीं था dropEffect। हालाँकि इसने मेरे लिए सफारी में काम किया। इसे नीचे की तरह सेट किया जाना चाहिए:

ev.dataTransfer.effectAllowed = 'move';

वैकल्पिक रूप से, के effectAllowedरूप में सेट किया जा सकता हैall , के , लेकिन मैं विशिष्टता रखना पसंद करूंगा जहां मैं कर सकता हूं।

एक केस के लिए जब ड्रॉप इफेक्ट मूव होता है:

ev.dataTransfer.dropEffect = 'move';