2

In the following code:

$(".drag").draggable({
    snap: ".drop",
    snapMode: "inner",
    snapTolerance: 50,
    revert: "invalid",
    start: function(){
        start_moves=moves;
    },
    stop: function(){
        stop_moves=moves;
    }

});

$(".drop").droppable({
    tolerance: "fit",
    drop: function (event, ui) {
        $(this).droppable('option', 'accept', ui.draggable); //accepts only the current draggable
        moves++;
        $("#total_moves").text(moves);
    },
    out: function (event, ui) {
        $(this).droppable('option', 'accept', ".drag"); //accepts all draggables
    }
});

Here's the sequence of events that's giving me issues:

  1. Move Drag1 to Drop1 (fine)
  2. Move Drag2 to Drop2 (fine)
  3. Try to move Drag2 to Drop1 (Drag2 reverts back to Drop2, fine)
  4. The issue is that after 3), the "out" event is triggered, but when Drag2 reverts back to Drop2, the "over" event (which I deleted) is not being triggered. It seems the "over" event is only triggered when I manually drag Drag2 back to Drop2 (as opposed to when reverting automatically). The reason this is an issue is because

  5. Moving Drag1 to Drop2 is now successful because after the line in the "out" event:

    $(this).droppable('option', 'accept', ".drag"); //accepts all draggables

the "over" event (which I deleted) isn't triggered to again only accept the current draggable. Thus, multiple draggables are allowed into a single droppable, which is unwanted behavior.

So the question is, when a draggable, after being dragged out of a droppable, reverts back to the same droppable automatically because of the "revert: 'invalid'", how can I get that droppable to recognize that the draggable has re-entered (so that "out" isn't the only event triggered)? The "over" event isn't doing the trick.

Emil
  • 1,131
  • 13
  • 23
  • Fix what? how do we reproduce this? where's the `HTML`? `CSS`? – T J Sep 11 '14 at 07:14
  • 1
    Actually I just noticed someone asked this one year ago without any success: http://stackoverflow.com/questions/18327928/jquery-ui-draggable-droppable-revert-and-out-conflict. This is his jsfiddle reproducing the issue: http://jsfiddle.net/tG6cj/. "To reproduce the problem, just drag any to the drop, then take it out to a white space, it will revert, then use the other drag to go to the same drop and it will stick which it shouldn't." – Emil Sep 11 '14 at 13:17

0 Answers0