Clone draggable после удаления в целевой области с помощью jQuery UI

Question

Я хочу, чтобы некоторые изображения падали в целевой области столько раз, сколько это было возможно. Но изображение падает только один раз. Мой JQuery код UI:

$(function() { 
    $(".draggable img").draggable({ 
     revert: "invalid", 
     appendTo: "#droppable", 
     helper: "clone" 
    }); 
    $("#droppable").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     drop: function(event, ui) { 
      $(this).find(".placeholder").remove(); 
      var image = $(".ui-draggable"); 
      $("<img />").image.src.appendTo(this); 
     } 
    }); 
}); 

Пожалуйста, смотрите демонстрацию здесь: jsFiddle example

Из примера вы видите, что изображение падает в области сНу только первый раз. Но я хочу, чтобы у пользователя была возможность перетаскивать одно и то же изображение столько раз, сколько они хотят в целевой области.

Так, например, пользователь может перетащить изображение 5 раз и будет 5 изображений клонировано в целевой зоне. Как я могу это сделать?

Answer 1

Вы были почти там. Вам действительно нужен атрибут helper: "clone". Лучший способ сделать это - создать новый клон , когда событие drop запускает с использованием .clone(). Тогда просто отформатируйте ее, и вы сделали:

$(function() { 
    $(".draggable img").draggable({ 
     revert: "invalid", 
     helper: "clone" 
    }); 
    $("#droppable").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     drop: function(event, ui) { 
      var newClone = $(ui.helper).clone(); 
      $(this).after(newClone); 
     } 
    }); 
}); 

DEMO

_{В качестве комментария: Я очень recommmend метод, который я описал выше, как это лучше сделать клон в drop случае droppable затем привязать событие dragstop к draggable. Это потому, что в противном случае будет сделано слишком много клонов: мой код гарантирует отсутствие избыточных клонов. Чтобы понять, что я имею в виду, откройте this jsFiddle (в котором используется метод: клонирование на перетаскивание) и попробуйте перетащить перетаскиваемый за пределами обозначенной области. Случается, что избыточные клоны будут добавлены в DOM. Это неэффективно и уродливо, и его следует избегать.}