jQuery UI drop event of droppable firing twice

Question

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.

Possible duplicate of [jQuery UI drop event of droppable widget firing twice](https://stackoverflow.com/questions/18664641/jquery-ui-drop-event-of-droppable-widget-firing-twice) — Felix, Apr 05 '19 at 13:12

melvin · Answer 1 · 2019-04-08T06:45:41.313

2

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');
 }

edited Apr 08 '19 at 06:45

answered Apr 08 '19 at 05:22

melvin

2,571
1
14
37

i updated fiddle https://jsfiddle.net/fbov9qgw/ Why droppable area remove my elment id? – Bhautik Apr 08 '19 at 05:40
@Bhautik because you are cloning the element. You are using `helper:clone` in draggable. Also no elements can have same `id` in the same page – melvin Apr 08 '19 at 05:58
What if i have to change html of draged element after dropped on droppable area. – Bhautik Apr 08 '19 at 06:06
you need to add `beforeStop` method in sortable and update `ui.helper` to change html. See the update section in my answer. Please mark this as answer since it has solved your question – melvin Apr 08 '19 at 06:44
Yes it's help me but it's call every time i sort the element. once element dropped and change html after i only do rearrange the order of element, – Bhautik Apr 08 '19 at 06:54
@Bhautik First of all can you explain your requirement ? Once you explain i can help you in the right way. Also please mark this as answer for the efforts i made – melvin Apr 08 '19 at 16:40
thanks for replying. Actually i am developing a plugin that have drag and drop functionality like mailchimp i have to do similar like mailchimp like drag module from one side area and dropped to other are while dropped dragged element change to custom element and that module have settings that change style of that module and also sort the module and so any things. And please do upvote my question also so people can see. – Bhautik Apr 09 '19 at 14:53
@Bhautik I have upvoted your question. Would you mind accepting the answer ? I will update a fiddle where you can see what you need – melvin Apr 09 '19 at 16:59
@Bhautik What you asked for was droppable firing twice. I have answered for that. You are asking for additional help – melvin Apr 10 '19 at 06:59
sorry but i need drop callback event and i also need use droppable area for other features. I know that sortable received callback solved my current problem but it not give me what i received in droppable area. – Bhautik Apr 10 '19 at 19:04
@Bhautik You should change your logic. Sortable receive solved your current issue. Instead of using droppable, call another sortable for the content in droppable area – melvin Apr 11 '19 at 04:09
can we chat in chat room – Bhautik Apr 12 '19 at 06:19
sure. now i am busy with work. Will notify you (probably after 9 hours) – melvin Apr 12 '19 at 07:19
@Bhautik Tell me. – melvin Apr 12 '19 at 16:00
https://chat.stackoverflow.com/rooms/191773/jquery-ui-drag-and-drop please join in this discussion. – Bhautik Apr 13 '19 at 06:31

jQuery UI drop event of droppable firing twice

1 Answers1