When I make a dragged clone and drop it into droppable, I can not drag it again

Question

When I make a dragged clone and drop it into droppable, I cannot drag it again. How should I do it? Secondly, I can only figure out how to us .append add the clone to droppable. But then it is snapped to the upper left corner after any existing element, and not the fall position.

 $(document).ready(function() { $("#container").droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); $(".product").draggable({ helper: 'clone' }); }); </script> <div id="container"> </div> <div id="products"> <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" /> <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" /> <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" /> </div> 

Answer 1

One way to do this:

 $(document).ready(function() { $("#container").droppable({ accept: '.product', drop: function(event, ui) { $(this).append($("ui.draggable").clone()); $("#container .product").addClass("item"); $(".item").removeClass("ui-draggable product"); $(".item").draggable({ containment: 'parent', grid: [150,150] }); } }); $(".product").draggable({ helper: 'clone' }); }); 

But I'm not sure if this is beautiful and clean coding.

Answer 2

I found this question through Google. I could not hold positions from binding to the container until I changed "ui.draggable" to "ui.helper" when adding:

 $(this).append($(ui.helper).clone()); 

Answer 3

For those who are trying to move a discarded item. Take a look here.

Jquery drag and drop and clone .

I really had to use code that looks like

 $(item).css('position', 'absolute'); $(item).css('top', ui.position.top - $(this).position().top); $(item).css('left', ui.position.left - $(this).position().left); 

to do this.

Answer 4

Here is my solution, it allows you to drag and clone a clone, and then replace it as needed with another drag and drop. It also has a callback function parameter that passes the dumped div object back so you can do something with the selected jquery div after it is deleted.

 refreshDragDrop = function(dragClassName,dropDivId, callback) { $( "." + dragClassName ).draggable({ connectToSortable: "#" + dropDivId, helper: "clone", revert: "invalid" }); $("#" + dropDivId).droppable({ accept: '.' + dragClassName, drop: function (event, ui) { var $this = $(this), maxItemsCount = 1; if ($this.children('div').length == maxItemsCount ){ //too many item,just replace $(this).html($(ui.draggable).clone()); //ui.sender.draggable('cancel'); } else { $(this).append($(ui.draggable).clone()); } if (typeof callback == "function") callback($this.children('div')); } }); }