Over-Ereignis wird nicht weitergegeben, wenn geschachteltes droppable in einem bestimmten Szenario nicht ziehbar akzeptiert

Question

Die folgenden Schritte gelten für das unten angegebene jsFiddle.

Schritte:

1. Klicken Sie auf und ziehen Ziehbare 1 auf den inneren abwerfbaren von Dropfähig 3. Fahren Sie Ziehbare 1 halten, nicht loslassen.
2. Beachten Sie, dass, wenn Draggable 1 auf der inneren Dropable ist und der Zeiger vollständig über den Bereich von Droppable 3 ist, die äußere Droppable 3 hervorgehoben ist, was erwartet wird.
3. Bewegen Sie Draggable 1 über die Grenzen von Droppable 3 hinaus und lassen Sie es los, sodass es vollständig in Leerräumen liegt.
4. Klicken und ziehen Sie Draggable 2. Sie müssen es nur auf einen zufälligen Leerraumpunkt ziehen, nicht auf einen Droppable.
5. Release Schleppen 2.
6. Schnappen Sie erneut DragGable 1 und ziehen Sie es auf das innere DropPable von Draggable 3. Halten Sie DragGable 1 gedrückt, lassen Sie es nicht los.
7. Wenn sich Draggable 1 im inneren Dropable befindet und der Zeiger sich vollständig über dem Bereich von Droppable 3 befindet, notieren Sie sich den Zustand des äußeren Droppable 3-Containers.

Erwartete Ergebnisse:

• Der äußere Behälter 3 Dropfähig wird hervorgehoben, wenn Ziehbare 1 vollständig auf der inneren abwerfbaren und innerhalb der Grenzen der Dropfähig 3.

tatsächlichen Ergebnisse ist :

• Der äußere Dropfähig 3 Behälter nicht hervorgehoben, wenn Ziehbare 1 3. vollständig auf der inneren abwerfbaren und innerhalb der Grenzen der Dropfähig ist

Hinweise:

• Wenn Sie das Problem debuggen, es stellt sich Aus dem einfachen Ziehen von Draggable 2 resultieren einige Zustandsänderungen in Droppable 3, sodass die Ereignisausbreitung nicht mehr wie erwartet funktioniert, wenn sich Droppable 1 auf dem inneren Droppable befindet.
• Dieser jsFiddle wurden Konsolenprotokolle hinzugefügt, um dieses Problem hervorzuheben.

Verwandte Frage:

Ich frage diese Frage, weil es etwas im Zusammenhang mit der folgenden Frage Stackoverflow scheint, aber mein Szenario ist etwas anders. Vielleicht hat es die gleiche Ursache, aber möglicherweise gibt es eine andere Problemumgehung?

• Over event of droppable isn't working correctly, after draggable is dropped on greedy droppable and dragged again

jsFiddle:

https://jsfiddle.net/deepankarj/60zz9zgb/

$(function() { 
    $("#draggable, #draggable2").draggable({ 
     cursor: "move", 
     cursorAt: { 
      top: 0, 
      left: 0 
     }, 
    }); 

    function logEventId(prefix, event) { 
     console.log(prefix + ": " + event.target.id); 
    } 
    function createLogEventIdFunction(handlerName) { 
     return function(event, ui) { 
      logEventId(handlerName, event); 
     } 
    } 

    $("#droppable, #droppable-inner").droppable({ 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     tolerance: "pointer", 
     over: createLogEventIdFunction("over"), 
     out: createLogEventIdFunction("out"), 
     drop: function(event, ui) { 
      logEventId("drop", event); 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("> p") 
       .html("Dropped!"); 
      return false; 
     } 
    }); 

    function decorateWithDroppable(selector, greedy, canAccept, over) { 
     canAccept = !!canAccept ? canAccept : function(element) { 
      console.log("canAccept: this: " + $(this).attr("id") + ", el: " + element.attr("id") + ", result: true"); 
      return true; 
     }; 

     over = !!over ? over : createLogEventIdFunction("over"); 

     $(selector).droppable({ 
      greedy: greedy, 
      activeClass: "ui-state-hover", 
      hoverClass: "ui-state-active", 
      tolerance: "pointer", 
      accept: canAccept, 
      over: over, 
      out: createLogEventIdFunction("out"), 
      drop: function(event, ui) { 
       logEventId("drop", event); 
       $(this) 
        .addClass("ui-state-highlight") 
        .find("> p") 
        .html("Dropped!"); 
      } 
     }); 
    }; 

    decorateWithDroppable("#droppable2, #droppable2-inner", true); 
    decorateWithDroppable("#droppable3", true); 
    decorateWithDroppable("#droppable3-inner", true, function canAccept(element) { 
     console.log("canAccept: this: " + $(this).attr("id") + ", el: " + element.attr("id") + ", result: " + (element.attr("id") !== "draggable"));  
     return (element.attr("id") !== "draggable"); 
    }); 

}); 

Answer 1

refreshPositions auf true setzen, wenn ziehbar Arbeiten für mich zu initialisieren. Hier ist der Beispielcode.

jQuery().draggable({ 
    ....  
    refreshPositions: true 
    .... 
});