Dragables Jquery UI, отключить отдельный div на dropppable

Question

Я пытаюсь создать какой-нибудь образовательный сайт, и одна из вещей, которую я хочу сделать, - это перетаскивать предметы в область, прежде чем перейти к следующему этапу.

способ сделать это - использовать скрипт jquery droppables и отключить опцию draggsable items, когда она сбрасывается в div с возможностью сброса.Затем я собирался добавить 1 к переменной, когда она дойдет до нужного числа, будет активирована кнопка для продвижения.

Проблема в том, что я не могу понять, как заставить работать только функцию сбрасываниядля каждого конкретного перетаскиваемого.Итак, что у меня есть:

$(document).ready(function() {
    $("#draggable").draggable();
    $("#draggable2").draggable();
    $("#droppable").droppable({
      drop: function() { $( "#draggable" ).draggable( "option", "disabled", true );; }
    });
  });

С этими divs;

<div id="droppable">Drop here</div>
<div id="draggable" class="drag">Drag me</div>
<div id="draggable2" class="drag">Drag me</div>

Но, конечно, все, что это делает, это отключает первый перетаскиваемый объект, когда кто-либо перетаскивается в сбрасываемый div.Мой javascript не очень хорош (я учусь), и я не знаю, как заставить его отключить только тот, который я положил в область сброса.

Может кто-нибудь помочь, пожалуйста?

Answer 1

Вы просто помещаете правильный код в неправильное место.

$( "#draggable" ).draggable( "option", "disabled", true )

Вышеописанное будет работать само по себе и отключать перетаскивание для #draggable, нет необходимости помещать его в функцию удаления.

OR

$("#droppable").droppable({
  disabled: true
});

Либо будет работать.

Answer 2

Этого можно достичь, задав scope для перетаскиваемых объектов и области сбрасывания:

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items"
    });
});

Пример ссылки .