Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery draggable and clone

Tags:

jquery

var icon = $("<div style='width:100px;height:100px;border-style:solid;'>");
icon.draggable({
    containment: 'parent',
    axis: 'y',
    drag: function(e,ui) { }
});
icon.clone(true).appendTo($("body"));

After I have made a clone, icon dragging stopped working. Does anybody know, how to fix this?

Thanks

like image 971
user470071 Avatar asked Oct 26 '10 12:10

user470071


People also ask

How to clone using jQuery?

To clone an element using jQuery, use the jQuery. clone() method. The clone() method clones matched DOM Elements and select the clones. This is useful for moving copies of the elements to another location in the DOM.

How does jQuery clone work?

The . clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.

What is jQuery draggable?

Draggable() Method This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.


1 Answers

The draggable functionality does not stop working.

However, when you hold your mouse over the clone and move it around, it is the original element that gets dragged.

Click here to see this behaviour: http://www.jsfiddle.net/bxH3Q/

To get around this, you have to make each clone draggable.

like image 150
Ed I Avatar answered Oct 22 '22 13:10

Ed I