Reputation: 11272
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
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