Drop is called when draggable is leaving nested sortable

Question

I have Droppable div with nested Sortable and Draggable which is connected to the Sortable and is accepted by the Droppable.

<div id="droppable">
    <div id="nested-sortable"></div>
</div>

<div class="draggable">
   test
</div>

jQuery (2.0.2)

$("#droppable").droppable({
    accept: ".draggable",
    drop: function() {
        console.log('Dropped'); //This should be called on drop!!
    }
});

$("#nested-sortable").sortable({
    placeholder: 'item',
});

$(".draggable").draggable({
    connectToSortable: "#nested-sortable",
    helper: "clone"
});

My problem is that when I drag the Draggable over the Sortable, drop event is triggered. I don't understand why - I haven't dropped it.

I reproduced it in this fiddle: http://jsfiddle.net/9ydp3L7q/3/

Thanks

jakub.petr · Accepted Answer · 2015-03-03 12:58:41Z

I found a dirty workaround. I really don't like it but it seems to work alright.

I ignore drop if the helper has ui-sortable-helper (which it gets when it's over the sortable).

$("#droppable").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
        if (ui.helper.hasClass("ui-sortable-helper")) {
            return;
        }

        console.log('Dropped');
    }
});

But I have to remove the class manually on out of the sortable. If I try to just remove the class I get into and infinate loop (and javascript on the page crashes) - so I had to do it in timeout.

$("#nested-sortable").sortable({
    placeholder: 'item',
    out: function(event, ui) {
        // this looks kind of dirty to me 
        setTimeout(function () {
            $(ui.helper).removeClass("ui-sortable-helper")
        }, 1);
    }
});

Fixed fiddle: http://jsfiddle.net/9ydp3L7q/6/

stkent · Accepted Answer · 2015-03-02 12:43:30Z

0

Use disable for sortable while using draggable. and Use disable for draggable while using sortable.

$( ".selector" ).sortable( "disable" );
$( ".selector" ).draggable( "disable" );

or

$('.selector').draggable({
    disabled: false
});
$(".selector").sortable({
      disabled: false
});

edited Mar 2, 2015 at 12:43

stkent

20.2k14 gold badges90 silver badges113 bronze badges

answered Mar 2, 2015 at 12:39

Arun

1421 gold badge1 silver badge9 bronze badges

1 Comment

jakub.petr Over a year ago

Did you mean this? jsfiddle.net/9ydp3L7q/5 Disabling droppable on sortable over and enabling it again on out doesn't fix it.

Collectives™ on Stack Overflow

Drop is called when draggable is leaving nested sortable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related