2013-10-28 6 views
8

मैं कई खींचने योग्य तत्वोंएचटीएमएल 5 dragend फायरिंग घटना तुरंत

<div Class="question-item" draggable="true">Box 1: Milk was a bad choice.</div> 
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div> 
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?  </div> 
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div> 

है और मैं निम्न ईवेंट प्रबंधकों है:

var $questionItems = $('.question-item'); 

$questionItems 
    .on('dragstart', startDrag) 
    .on('dragend', removeDropSpaces) 
    .on('dragenter', toggleDropStyles) 
    .on('dragleave', toggleDropStyles); 


function startDrag(e){ 
    console.log('dragging...'); 
    addDropSpaces(); 
    e.stopPropagation(); 
} 

function toggleDropStyles(){ 
    $(this).toggleClass('drag-over'); 
    console.log(this); 
} 


function addDropSpaces(){ 
    $questionItems.after('<div class="empty-drop-target"></div>'); 
} 

function removeDropSpaces(){ 
    console.log("dragend"); 
    $('.empty-drop-target').remove() 
} 

क्यों यह केवल पहला खींचने योग्य के लिए काम करता है। यदि मैं खींचता हूं कि आखिरी ड्रैगगेबल - ड्रैगएंड इवेंट तुरंत निकाल दिया जाता है। (मैं btw jQuery UI का उपयोग नहीं करना चाहते हैं)

यह मेरे लिए कोई मतलब नहीं है - यह एक बग की तरह दिखता है।

मैं क्रोम वी 30 पर OSX पर कर रहा हूँ।

यहाँ JSFiddle के लिए एक लिंक है: http://jsfiddle.net/joergd/zGSpP/17/

(संपादित करें: इस निम्नलिखित प्रश्न को बार-बार होता है: dragend, dragenter, and dragleave firing off immediately when I drag - लेकिन मुझे लगता है कि मूल रूप से पोस्ट jQuery UI के साथ जाने के लिए ठीक था, जबकि मैं इसे होना चाहता हूँ एचटीएमएल 5 मूल)

उत्तर

4

मेरे पास कोई सीधा समाधान नहीं है, लेकिन ड्रैगस्टार्ट इवेंट हैंडलर में डीओएम को बदलना इस समस्या का कारण बन रहा है, और डीओएम को बदलने वाला कोई भी कोड वास्तव में ड्रैग एंटर ईवेंट हैंडलर में जाना चाहिए - ऐसा करना, खींचें & ड्रॉप घटनाओं को अधिक विश्वसनीय रूप से निकाल दिया जाता है।

सुनिश्चित नहीं हूं कि इस डिजाइन से है - यह हालांकि एक बग की तरह एक सा लगता है।

9

मैं विषय dragend, dragenter, and dragleave firing off immediately when I drag, क्या समस्या हल हो (जो एक क्रोम बग होने के लिए लग रहा है) मेरे लिए हैंडलर में 10 मिलीसेकंड का एक setTimeout जोड़ सकते हैं और है कि समाप्त हो गया डोम हेरफेर करने के लिए था में उल्लेख किया है।

3

यह एक ज्ञात क्रोम मुद्दा है। समस्या यह है कि, जोर्ज ने उल्लेख किया है कि आप ड्रैगस्टार्ट पर डोम का उपयोग करते हैं।

आप ऐसा कर सकते हैं, लेकिन आप एक समय समाप्ति में यह करने के लिए की जरूरत है।

संबंधित मुद्दे