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>
You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.
The . position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with . offset() , which retrieves the current position relative to the document.
We can disable drag and drop on HTML elements by setting the draggable attribute to false . We set draggable to false so we can't drag it. We add event listeners for the dragstart and drop events with addEventListener .
Limit draggable area using 'containment' option It is simple. All you have to do is, add an option called containment to the draggable() method. The containment option has a value parent.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With