Инициирование события удаления с помощью jQuery droppables

Question

Были заданы варианты этого вопроса, но ответы все разные, несколько устарели и не работают для меня, поэтому я надеюсь, что это вопрос измененных синтаксических правил в jQuery, которые я пропускаю.

Сценарий HTML:

<div id="theDroppable">Droppable</div>
<div id="theDraggable">Draggable</div>
<div id="theTrigger">Click to trigger a drop</div>

JQuery:

$( "#theDroppable" )
    .droppable({
      drop: function( event, ui ) {
          alert('dropped');
      }
    });

$( "#theDraggable" ).draggable({});

$( "#theTrigger" ).click(function(){$( "#theDroppable" ).trigger('drop')});

Скрипка: http://jsfiddle.net/7Bewj/

Вышеприведенное создает Droppable, Draggable и div, которые я хотел бы использовать, чтобы каким-то образом вызвать функцию, связанную с событием drop в dropppable.

Draggable работает отлично, перетаскивая его на dropable и выпуская вызывает предупреждение.

Вопрос в том, как я могу запустить тот же процесс без использования перетаскиваемого объекта... или, по крайней мере, без перетаскиваемого элемента, расположенного сверху (например, нажав 3-й элемент div)?

Answer 1

Как вы можете видеть из функции:

drop: function( event, ui ) {
      alert('dropped');
  }

Если вы определяете такие методы, как DROP, во время объявления droppable, то они вызываются только тогда, когда на них сбрасывается элемент DOM (объект UI), поэтому вы не можете вызвать эту функцию.

Если вам нужно вызвать DROP, я бы посоветовал вам связать это событие с droppable как:

$( "#theDroppable" ).droppable({hoverClass : 'droppableStyle'});
$( "#theDroppable" ).on('drop',function(event,ui){
    alert('dropped');
});

Функция DROP теперь может быть активирована путем удаления 2nd DIV или щелчком по 2nd DIV, как в вашем случае. Запустите его вручную, используя:

 $( "#theDroppable" ).trigger('drop');

ПРИМЕЧАНИЕ. Аргумент 'ui' при запуске вручную будет неопределенным, иначе он будет содержать объект пользовательского интерфейса, когда на него перетаскивается перетаскиваемый объект.

Вот jsFiddle