Jquery: draggable clone

Question

Hello.

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 snap to the top most left corner after any exsisting 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>

Answer 1

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.

Answer 2

Perfect! It works! Your example has been very useful to me! Thanks!

Answer 3

I tried the exact same code as

    $(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 it snaps the dragged images the one after the other and doesnt maintain the positions that they were dragged to. How does one achieve this?

Thanks

Answer 4

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());

Answer 5

Thanx a lot! nice work. Its very usefull to me. By the way, M trying to improve this with restrict redundant in '#products'. Any one can help me?

Answer 6

how to get the position of the cloned dragged and droped product from container and how to resize the product drop.

if i remove the helper:clone the .position or offset works otherwise not

Please help

thanks in advance

Answer 7

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

http://stackoverflow.com/questions/2100896/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.

Answer 8

this has helped me a lot! thank you guys!