ड्रॉप डाउन करने योग्य विजेट की jQuery UI ड्रॉप घटना दो बार

Question

सबसे पहले, मुझे पता है कि इस साइट और अन्य दोनों में पहले से ही यह प्रश्न पूछा गया है, लेकिन उत्तर मेरे परिदृश्य के लिए सभी बकवास हैं (यदि वे पूरी तरह से बकवास नहीं हैं), और (कम से कम यहां प्रश्न के लिए: jQuery UI drop event of droppable fires on sortable), सुझाव केवल .sortable को बंद करना है, जो निश्चित रूप से मैं नहीं करना चाहता हूं। यहाँ

$(function() { 
    $("#sortable").sortable({ 
     revert: true 
    }); 
    $("#draggable, #draggable2").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 

    $("#sortable").droppable({ 
     drop: function (event, ui) { alert("done been triggered."); } 
    }); 

    $("ul, li").disableSelection(); 
}); 

और मान्य है:

ठीक है, मैं इस jQuery है (ध्यान में रखना है, तो किसी भी विकल्प या html आईडी मूर्खतापूर्ण लग, यह सिर्फ परीक्षण के लिए है तो मैं कोशिश करते हैं और यह पता लगा सकते हैं) मार्कअप:

<div class="objectPaletteHolder"> 
    <ul> 
     <li id="draggable" class="ui-state-highlight">Drag me down</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, also</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, as well</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight click">Drag this down, click</li> 
     <li id="draggable2" class="ui-state-highlight clicky">Drag this down, clicky</li> 
    </ul> 
</div> 
<div class="editContainer"> 
    <ul id="sortable"> 
     <li class="ui-state-default">Item 1</li> 
     <li class="ui-state-default">Item 2</li> 
     <li class="ui-state-default">Item 3</li> 
     <li class="ui-state-default">Item 4</li> 
     <li class="ui-state-default">Item 5</li> 
    </ul> 
</div> 

मैं sortable divs या ऐसा कुछ ओवरलैपिंग की जरूरत नहीं है, और मुझे लगता है कि मैं समझता हूँ 'क्यों' यह हो रहा है (? क्योंकि sortable डिफ़ॉल्ट रूप से draggables गुण हो जाता है), मैं बस नहीं कर सकते रों इसके बारे में कुछ भी करने के लिए उत्सुक है।

समस्या, ज़ाहिर है, कि ...

drop: function (event, ui) { alert("done been triggered."); } 

... दो बार शुरू हो रहा की जा रही है, जब यह केवल एक बार जरूरत है।

मुझे लगता है कि इस समस्या का एक आसान समाधान होगा, क्योंकि अगर इस समस्या को जटिल स्क्रिप्टिंग को हल करने की आवश्यकता होती है, तो मुझे लगता है कि ये विशेष jQuery विजेट सभी परेशानी के लायक नहीं होंगे। शायद मैं उलझन में हूँ?

Answer 1

यह एक ही तत्व पर sortable और droppable दोनों का उपयोग कर ज्ञात समस्या है।

आप इसके बजाय sortable की receive ईवेंट का उपयोग कर सकते हैं।

jsFiddle Demo

$("#sortable").sortable({ 
     revert: true, 
     receive: function (event, ui) {  
      alert("receive been triggered."); 
     } 
}).droppable({ }); 

Answer 2

शायद मैं बहुत देर हो चुकी एक छोटे से कर रहा हूँ, लेकिन मैं इस उम्मीद है कि यह किसी को मदद मिलेगी तैनात। यह वह कोड है जिसका मैं उपयोग करता हूं। असल में, यदि फ़ंक्शन को दो बार बुलाया जाता है, तो उनके बीच अंतराल जल्दी होना चाहिए (मानव जो आमतौर पर करता है उससे तेज) इसलिए मैंने संख्या को 200 मिलीसेकंड होने के लिए सेट किया है।

मैंने स्थानीय स्टोरेज का उपयोग "last_call" नामक एक चर सेट करने के लिए किया था। यह वह समय था जब समारोह कहा जाता था। अगली कॉल में, हम जांच करेंगे कि फ़ंक्शन पहले कहलाता था या नहीं। अगर इसे नहीं कहा गया था, तो फ़ंक्शन निष्पादित जारी रहेगा। अगर इसे बुलाया गया था, तो हम जांच करेंगे कि आखिरी बार इसे कब बुलाया गया था। अगर इसे 200 मिलीसेकंड (जो स्पष्ट रूप से मशीन कॉल, मानव कॉल नहीं) के भीतर बुलाया गया था, तो हम इसे फिर से कॉल नहीं करेंगे।

var d = new Date(); 
    var this_time = d.getTime(); 
    if (localStorage.getItem("last_call") != null) 
    { 
     if ((this_time - parseInt(localStorage.getItem("last_call"))) < 100) 
     { 

      return; 
     } 

    } 
    localStorage.setItem("last_call", this_time); 

Answer 3

मुझे एक ही समस्या थी। वहां 2 ड्रॉपटेबल तत्व थे, उनमें से एक की सापेक्ष स्थिति थी, और दूसरा - पूर्ण। वे घोंसले नहीं थे, लेकिन पूर्ण पद के साथ एक का एक हिस्सा रिश्तेदार स्थिति के साथ एक के हिस्से से ऊपर था (jQuery दस्तावेज़ों में इसे "छेड़छाड़" कहा जाता है)। जब मैंने ड्रैग करने योग्य तत्व को "पूर्ण" ड्रॉप करने योग्य में स्थानांतरित किया, तो ड्रॉप ईवेंट दो बार ट्रिगर किया गया था। मैं कुछ दिनों के लिए खोज कर रहा हूं, लेकिन कोई समाधान नहीं मिला।

फिर मैंने एक साधारण सामान्य कामकाज करने का फैसला किया। बहुत आकर्षक नहीं लग रहा है, लेकिन इससे 2 बूंदों की घटनाओं को फायर करने में किसी भी स्थिति में मदद मिलेगी।

drop: function(e, ui) { 
    if (! $('.already-dropped').length) { 
     $('body').addClass('already-dropped'); 
     setTimeout(function() { 
      $('.already-dropped').removeClass('already-dropped'); 
     }, 100); 
     // callback code... 
    } 
}