Search code examples
jqueryjquery-uiclonechildren

Jquery UI cloning children of a div


I am working on a project using jquery and jqueryUI (which I just started to use), and I've been struggling with a problem for a while : I am using the drag and drop functionnality (.draggable() and .dropable()) to clone several items from the draggable zone to the droppable zone.

From the drag function, I 'send' several div I have selected like this :

helper: function(){
    var selected = $('.' + selectedClass);
    if (selected.length === 0) {
        selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container;
},

In the drop function, I want to use the several divs and modify them (this is existing code that I'd like to avoid modifying) one by one. I use a for loop to treat each of the item and I use :

var clone  = ui.helper.children().clone();

But when I want to get a particular div inside the main div, and I do

var clone  = ui.helper.children().get(i).clone();

Then the previous code :

clone.find('.formDeleteTileMenu').remove();  

Does not work anymore, nor does any of the other DOM manipulating functions.

Anyone would know how I could get a particular chil of the div I receive and use it as a clone?

Thanks in advance for any help, I feel like I missed something.


Solution

  • I haven't tested it, but get() returns the underlying DOM-object instead of a jQuery object, so try this (use eq instead of get):

    var clone  = ui.helper.children().eq(i).clone();