jquery clone doesn't seem to retain draggable/droppable events

Question

Hi there,

I have a row where I can drag items into it, and sort them. This all works ok. I even have a delete event on each item, so it can be removed from the row.

I want an option where I can clone the row. I do this by using the clone function below:

clonedrow = $("#row1").clone(true);
clonedid = "row"+nextRowNumber; //nextRowNumber is a variable calculated by counting the rows that exist already.
clonedrow.attr("id",clonedid).insertAfter("#row1");

This all works, apart from the fact the draggable/sortable events in 'row1' are not copied to the cloned row. Am I doing something wrong? I thought by adding 'true' it copies the events...?

FWIW when loading the page, I have a function which automatically builds the first row, and applies the draggable/sortable/delete events to it...

Answer 1

Hi, jQuery copy events and data if clone is passed true parameter. In order to test whether events have been passed see events property of element's data http://www.jsfiddle.net/zfSrR/1/

console.log($("#row1").data('events'));
console.log($(clonedrow).data('events'));

Answer 2

I don't know too much about draggable, but there seems to be some strange behavior when cloning a draggable element with true. Perhaps you don't want all the data cloned if some of it should be specific to that element.

In this simple example, when you clone(true) one and try to drag the clone, the original is dragged.

http://jsfiddle.net/ZmcHd/

Perhaps it is better to just reapply the draggable().

clonedrow = $("#row1").clone().draggable();

http://jsfiddle.net/ZmcHd/1/

If there are other settings that you need, then I'd store them in a variable in order to prevent duplication.

var settings = {
        // some settings
}

clonedrow = $("#row1").clone().draggable(settings);