Дублирование Jquery Draggables - PullRequest
Новая
       12

Дублирование Jquery Draggables

4 голосов
/ 18 сентября 2011

Я пытаюсь создать элементы draggalbe, которые можно дублировать и перетаскивать на предмет сброса. Хорошо, после небольшого усилия, продолжайте в том же духе и сделайте дубликат перетаскиваемым. Но метод «drop» делает так, что если я перетаскиваю новый клон более одного раза, он продолжает клонировать себя. Я понимаю, почему он это делает, но я не очень уверен, как это отключить. Только предмет, находящийся за пределами коробки, подлежащей падению, должен дублироваться. Оказавшись внутри коробки, дубликаты должны иметь возможность перемещаться, но не клонировать себя.

* ** 1003 тысяча два * Пример

Попробуйте перетащить маленького ежика в коробку (пока все хорошо), затем перетащите его внутрь коробки несколько раз, чтобы увидеть проблему. 

$(function() {
    $("#draggable1").draggable({ helper: 'clone', revert: "invalid" });
    $("#panel1").droppable({
        drop: function(event, ui) {
            $(this).append($(ui.helper).clone().draggable());
        }
    });
});

1 Ответ

6 голосов
/ 18 сентября 2011

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

Достаточно удобно, у вас уже есть способ обнаружить это: у <img> вне коробки есть идентификатор, в то время как у упавших элементов <img> внутри коробки нет. Поэтому все, что вам нужно сделать, это выяснить, как получить доступ к «источнику» отброшенного элемента внутри функции обратного вызова drop.

Согласно droppable документам , ui.draggable является "текущим перетаскиваемым элементом, объектом jQuery" , поэтому вы можете получить id этого элемента в любом из несколько способов. Вот один способ, который работает: 

$("#draggable1").draggable({
    helper: 'clone',
    revert: "invalid"
});

$("#panel1").droppable({
    drop: function(event, ui) {
        if (ui.draggable[0].id) {
            $(this).append($(ui.helper).clone().draggable());
        }
    }
});

Демо: http://jsfiddle.net/mattball/MJhcp/

Поскольку ui.draggable является полноценным объектом jQuery, он также будет работать с любым из следующих, вместо ui.draggable[0].id:

  • ui.draggable.get(0).id
  • ui.draggable.attr('id')
  • ui.draggable.prop('id')
...