When I make a draggable clone and drop it in a droppable I cannot drag it again

Question

When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us .append to add the clone to the droppable. But then it snaps to the top-left corner after any existing element and not the drop 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>

score 53 · Accepted Answer · edited Sep 21 '16 at 13:20

53

One way to do it is:

$(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 it is nice and clean coding.

edited Sep 21 '16 at 13:20

Manish Jangir

5,329
4
42
75

answered May 15 '09 at 10:48

Cudos

5,733
11
50
77

3

Little late to the party, but that `$(this).append($("ui.draggable").clone());`, should that be `$(this).append($(ui.draggable).clone());` ? (without the quotes) since you are loading the object from the callback parameter? – Barry Chapman Mar 17 '19 at 15:07

Bob Nadler · Answer 2 · 2009-08-31T04:53:08.017

26

I found this question via Google. I couldn't keep the positions from snapping to the container either, until I changed 'ui.draggable' to 'ui.helper' when appending:

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

edited Aug 31 '09 at 04:53

answered Aug 31 '09 at 04:46

Bob Nadler

1,247
14
18

score 5 · Answer 3 · edited May 23 '17 at 12:10

5

For those trying to reposition the dropped item. Take a look here.

Jquery drag /drop and clone.

I actually 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 it.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 02 '10 at 02:33

rado

4,040
3
32
26

score 0 · Answer 4 · answered Jan 28 '16 at 22:35

Here is my solution, it allows for dragging and dropping a clone, and then replacing it after as needed by another drag and drop. It also has a callback function parameter which passes back the dropped div object so that you can do something with the jquery selected div once dropped.

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'));
    }
  });
}

When I make a draggable clone and drop it in a droppable I cannot drag it again

4 Answers4

Linked