Как отключить перетаскивание перетаскиваемого div на капли?

Question

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

Я не могу найти для этого функцию. Я пробовал с

$(".draggable").draggable({ helper: "clone" 

но никакого результата.

Answer 1

Вы можете поймать событие dragstop на вашем перетаскиваемом div, внутри fucntion этого обработчика вы можете удалить перетаскиваемые функции. Что-то вроде этого:

$(".draggable").on("dragstop", function(event, ui) { 

    $(".draggable").draggable('destroy'); 

}); 

Точно так же вы могли бы включить это в инициализации вашего перетаскиваемом DIV как так:

$(".draggable").draggable({ 
    stop: function(event, ui) { 
     $(".draggable").draggable('destroy'); 
    } 
}); 

Если вы хотите, чтобы это произошло, когда он упал внутри другого конкретного DIV, не просто какое-то время он упал, то вам нужно будет поместить этот код в обработчике drop случае вашей сбрасываемой DIV ....

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     $(".draggable").draggable('destroy'); 
    } 
}); 

или

$(".droppable").on("drop", function(event, ui) { 
    $(".draggable").draggable('destroy'); 
}); 

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

$(".draggable").draggable('destroy'); 

с

$(".draggable").draggable('disable'); 

, если вы планируете сделать это перетаскивание в будущем с вызовом :

$(".draggable").draggable('enable');