CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-sortablejquery-ui-draggablejquery-ui-droppable
Bhautik
Bhautik

Reputation: 11272

jQuery UI drop event of droppable firing twice

Html

<div id="dropableArea">Drop area</div>
<ul>
    <li class="dragModule">Item 1</li>
    <li class="dragModule">Item 2</li>
    <li class="dragModule">Item 3</li>
</ul>

JQuery

$(function(){
    $('.dragModule').draggable({connectToSortable:'#dropableArea',helper: 'clone'});

    $('#dropableArea').droppable({
        accept: '.dragModule',
        activeClass:'active-droppable',
        drop:function(){
            console.log('drop');
        }
    });

    $('#dropableArea').sortable({accept: '.dragModule',connectWith: '#dropableArea',revert: true,});
    $("#dropableArea").disableSelection();
});

My issue is that I console console.log('drop'); this is a droppable callback drop function and it's called twice.

Upvotes: 2

Views: 592

Answers (1)

melvin
melvin

Reputation: 2621

This is a known issue with jQuery UI. The issue occurs when you use droppable and sortable on same element. Here you are using droppable and sortable on same element droppableArea Inorder to solve this, instead of drop method of droppable use recieve method of sortable. Both does the same thing in your case.

Check the FIDDLE

$(function() {
  $('.dragModule').draggable({
    connectToSortable: '#dropableArea',
    helper: 'clone'
  });

  $('#dropableArea').droppable({
    accept: '.dragModule',
    activeClass: 'active-droppable'
  });

  $('#dropableArea').sortable({
    accept: '.dragModule',
    connectWith: '#dropableArea',
    revert: true,
    receive: function (event, ui) {      
       console.log("drop");
    }
  });
  $("#dropableArea").disableSelection();
});

Change the code as above and it will solve the issues. Please let me know if the issue is resolved

#UPDATE

You can add the following code in sortable function

 beforeStop : function (event, ui) {      
   ui.helper.html('hello');
 }

Upvotes: 2

Related Questions