jQuery UI дважды удаляет сбрасываемый выстрел

Question

Html

<div id="dropableArea">Drop area</div>
<hr>

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

Моя проблема в том, что я консоль console.log ('drop');это функция отбрасывания обратного вызова, которая вызывается дважды.

Answer 1

Это известная проблема с jQuery UI. Эта проблема возникает, когда вы используете сброс и сортировку на одном элементе. Здесь вы используете капельное и сортируемое на одном элементе droppableArea Чтобы решить эту проблему, вместо drop метода droppable используйте recieve метод sortable. Оба делают то же самое в вашем случае.

Проверьте 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();
});

Измените код, как указано выше, и это решит проблемы. Пожалуйста, дайте мне знать, если проблема решена

# UPDATE

Вы можете добавить следующий код в сортируемую функцию

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