JQuery Drag n Drop Stage

Question

Я пытаюсь создать сцену. У меня есть 5 предметов в перетаскиваемом div. Там клоны будут перетаскиваться в 20 областей сбрасываемых объектов.

Я создал 20 ящиков divs с различными идентификаторами. Означает несколько областей с возможностью падения.

Проблема в том, что у меня нет идеи, как я могу получить идентификатор div, где элемент упал, и как я покажу этот продукт только в этом div. Сейчас он отображает все элементы в одном первом div.

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

Заранее спасибо

Answer 1

JQuery-UI Draggable Droppable обработчик события

Вы должны получить Droppable объект DOM из аргументов события, передаваемых капельным методом.

$(".selector").droppable({ 
    drop: function(event, ui) { 
    // $(this) represents the droppable. 
    alert($(this).attr("id")); 
    } 
}); 

перетаскиваемый можно ссылаться на объект через ui.draggable. Большая часть этого была взята из документации JQuery-UI нашел at the jQuery-ui Website

Добавление Droppable к Динамически добавленный элемент

В том случае, если элементы, давайте называть их цели этапа, добавляются динамически в " stage ", тогда вы захотите вызвать метод droppable для этих элементов при их создании.

function makeStageTargets(i) { 
    for(i;i--;true){ 
    var d = $("div").attr("id","item_"+i); // this will make a div id item_i 
    $("stage").append(d); 
    d.droppable(
     drop:function(e, ui){ 
     var param = $(ui.draggable).attr('src'); 
     $("stage").remove(ui.draggable); // this will remove an item when dropped 
     addlist(param); 
     }); 
    } 
} 
makeStageTargets(60); 

Если я пропустил дух вашего вопроса, пожалуйста, посоветуйте.

Answer 2

Вот код, я использую

$ ("div_item"). Droppable ({

 drop: 
      function(e, ui) 
       { 
        var param = $(ui.draggable).attr('src'); 

        addlist(param); 
       } 

}); 

Где addlist() является функцией, чтобы получить AJAX содержание и отображение в DIV, как $ . ('#div_item') присоединять (msg.txt);

переменную 'Msg', чтобы получить детали элемента из АЯКС файла

проблема с идентификатором div_item это больше, чем 20, со.. lud be upto 60. Я также хочу ограничить каждый div одним удаленным в нем. Большое спасибо за вашу помощь.