javascript - When cloning a draggable object in jQuery UI, how can you transfer the data and events to the new element? - Stack

admin管理员组

文章数量:1200965

I have a draggable element with the helper: 'clone' set, but when it clones the element, none of the data() or events are persistent in the new element.

I've tried a number of ways to reattach the data(), but I can't seem to select the new element as well as the old element in the same statement.

For instance, I can select the initial element in the draggable stop() event:

$blah.draggable({
    helper: 'clone',
    stop: function(ev, ui) {
        var oldData = $(ev.target).data('blah');
    }
});

And I can also get the new element in the droppable drop() event:

$blah.droppable({
    drop : function(ev, ui) {
        var $newElement = ui.draggable;
    }
});

But I can't figure out a way to get both in the same event.

What I'd like to do is somehow transfer the data, e.g.:

$newElement.data('blah', $oldElement.data('blah'));

Or otherwise make the data persistent, like you can with $blah.clone(true);

I have a draggable element with the helper: 'clone' set, but when it clones the element, none of the data() or events are persistent in the new element.

I've tried a number of ways to reattach the data(), but I can't seem to select the new element as well as the old element in the same statement.

For instance, I can select the initial element in the draggable stop() event:

$blah.draggable({
    helper: 'clone',
    stop: function(ev, ui) {
        var oldData = $(ev.target).data('blah');
    }
});

And I can also get the new element in the droppable drop() event:

$blah.droppable({
    drop : function(ev, ui) {
        var $newElement = ui.draggable;
    }
});

But I can't figure out a way to get both in the same event.

What I'd like to do is somehow transfer the data, e.g.:

$newElement.data('blah', $oldElement.data('blah'));

Or otherwise make the data persistent, like you can with $blah.clone(true);

• javascript
• jquery
• jquery-ui
• clone
• draggable

Share Improve this question Follow edited Dec 20, 2015 at 20:44 Brian Tompsett - 汤莱恩 5,8837272 gold badges6161 silver badges133133 bronze badges asked Jun 17, 2011 at 22:04 Jon RaaschJon Raasch 3,98377 gold badges3232 silver badges3232 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 14

To get access to the data of original element in drop you can use ui.draggable.context. In the example below context would refer to the original dragged element and you have access to all of its content. Draggable refers to the new element that is being dropped.

$("#droppable").droppable({
    drop: function(ev, ui) {        
        console.log(ui);
        console.log(ui.draggable.context);
        console.log($(ui.draggable.context).data('pic'));
    }
});

I haven't worked too extensively with droppable, but couldn't you just do something like this?

$(".draggable").draggable({
    helper: 'clone'
});

$("#droppable").droppable({
    drop: function(ev, ui) {
        $(this).append(ui.draggable.clone(true));
    }
});

Seems to work unless there's something I'm missing:

http://jsfiddle.net/hasrq/

Turns out the problem was sortable, not draggable / droppable (I was attaching sortable later on, but figured it wasn't part of the problem here so I left it out of the original question).

I ended up using sort of a combination of @kingjiv's solution above, along with a not-the-greatest hack but at least it seems to be working:

$blah.sortable({
    receive: function(ev, ui) {
        // setting a global variable here
        MyGlobals.cloneCache = ui.item.clone(true);
    },
    stop: function(ev, ui) {
        $(ui.item).replaceWith(MyGlobals.cloneCache);
    }
});

The idea is that you first clone the original item in the receive() event, cache this in a variable, and then replace the item with that in the stop() event.

Kind of ugly but at least it's working.

ui.item refers to dragged item. When the dragged item is cloned, there is no built-in way to access the target item from receive function. However, there is a bit hacky way how to do it:

$blah.sortable({
    receive: function (ev, ui) {
        var $target = $(this).data().sortable.currentItem;
        var $source = $(ui.sender);
        // now you can copy data from source to target
        $target.data('data-item', $source.data('data-item')); 
    } 
});

本文标签：