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

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

Пример

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

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

jquery clone draggable droppable
person Kristi Simonson    schedule 18.09.2011    source источник
comment
это поможет, если вы удалите атрибут идентификатора клона?   -  person Scott Evernden    schedule 18.09.2011

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужен способ, чтобы droppable обнаруживал разницу между отбрасываемым внешним ежом и отбрасываемым одним из уже отброшенных ежей. Таким образом, вы можете убедиться, что обратный вызов 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')
person Matt Ball    schedule 18.09.2011