jQuery UI Drop-Ereignis von abwerfbaren Widget Brennen zweimal

Question

Erstens, ich weiß, diese Frage vor gefragt wurde, die beide in dieser Seite und andere, aber die Antworten sind alle Müll für mein Szenario (wenn sie nicht ganz Müll), und (zumindest für die Frage hier: jQuery UI drop event of droppable fires on sortable), ist der Vorschlag nur .sortable ganz auszuschalten, was die meisten ist sicherlich nicht das, was ich tun möchte.

Okay, ich habe diese jquery (denken Sie daran, wenn alle Optionen oder HTML-IDs albern aussehen, das ist nur zum Testen, damit ich versuchen kann und diese heraus):

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

Und hier ist die gültig Auszeichnungs:

<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> 

ich habe keine sortable divs oder so etwas überlappen, und ich glaube, ich verstehe ‚warum‘ dies geschieht (? weil sortable draggables Eigenschaften standardmäßig bekommt), ich kann es einfach nicht s Eem, etwas dagegen zu tun.

Das Problem ist natürlich, dass die ...

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

... wird zweimal ausgelöst wird, wenn es nur einmal benötigt wird.

Ich würde denken, dass es eine einfache Lösung für dieses Problem geben würde, denn wenn dieses Problem eine Reihe von komplexen Scripting zu beheben benötigt, würde ich denken, dass diese bestimmten Jquery Widgets nicht den ganzen Ärger wert wären. Vielleicht bin ich nur verwirrt?

Answer 1

Das ist ein bekanntes Problem, sowohl sortable und droppable auf demselben Element verwendet.

können Sie die sortable ‚s statt receive Ereignis verwenden.

jsFiddle Demo

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

Answer 2

Vielleicht bin ich ein wenig zu spät, aber ich gepostet hoffentlich jemand helfen. Dies ist der Code, den ich verwende. Grundsätzlich, wenn die Funktion zweimal aufgerufen wird, soll der Abstand zwischen ihnen schnell (schneller als das, was Mensch in der Regel tun), so habe ich die Nummer 200 Millisekunden.

habe ich local eine Variable zu setzen „last_call“ genannt. Es ist die Zeit, zu der die Funktion aufgerufen wurde. Beim nächsten Aufruf prüfen wir, ob die Funktion zuvor aufgerufen wurde. Wenn es nicht aufgerufen wurde, wird die Funktion weiter ausgeführt. Wenn es angerufen wurde, prüfen wir, wann es das letzte Mal angerufen wurde. Wenn es innerhalb von 200 Millisekunden aufgerufen wurde (was offensichtlich ein Maschinenanruf, kein menschlicher Anruf ist), werden wir es nicht erneut aufrufen.

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

Ich hatte ein ähnliches Problem. Es gab zwei abtropfbare Elemente, von denen eines eine relative Position hatte und ein anderes - absolut. Sie waren nicht verschachtelt, aber ein Teil desjenigen mit absoluter Position war über dem Teil desjenigen mit relativer Position (in jQuery-Dokumenten heißt das "schneiden"). Wenn ich ein ziehbares Element in das "absolute" Dropable verschoben habe, wurde das drop-Ereignis zweimal ausgelöst. Ich habe ein paar Tage gesucht, aber keine Lösung gefunden.

Dann habe ich beschlossen, eine einfache allgemeine Problemumgehung zu machen. Sieht nicht sehr attraktiv aus, aber das wird in jeder Situation helfen, 2 Drop Events zu feuern.

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