Jquery Drag n Drop Stage - PullRequest
Новая
       3

Jquery Drag n Drop Stage

1 голос
/ 08 августа 2010

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

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

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

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

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

Ответы [ 2 ]

1 голос
/ 08 августа 2010

jQuery-UI Перетаскиваемый обработчик события Droppable

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

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

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

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

В случае, если элементы, назовем их целевыми объектами, динамически добавляются к «этапу», вам нужно будет вызвать метод 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);

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

0 голосов
/ 09 августа 2010

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

$ ("div_item"). Droppable ({

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

                    addlist(param);
                }

});

Где addlist () - это функция для получения содержимого ajax и отображения в divнапример, $ ('# div_item'). append (msg.txt);

переменная 'msg' для получения сведений об элементе из файла ajax.

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

...