apply a javascript function to draggable copy

Question

I want to apply function called copie_contenue that change the div parent id on the copy I created after I dragged my original,but my script change the original not the copy I also tried ui.helper in the place of this but nothing happen

    $('#model_1').draggable({
    connectToSortable:'#global_div',
    addClasses: false,
    helper:'clone', 
    stop: function(e,ui) {
        $(this).replaceWith(copie_contenue("model_1"));
    }
    })

Answer 1

@DarthJDG :actually it worked but i included my sortable in the draggable script thanks

$(function() {

             $('.dragging').draggable
            ({
revert: 'invalid',
connectToSortable:'#global_div',
addClasses: false,
helper:'clone',
drag: function(event,ui)
{

    $('#global_div').sortable
    ({

               receive: function(event, ui)
    {
         $(this).find(".dragging").each(function(){


            // Do your stuff with $(this), which is the newly created cloned item
            }:
    }
    });
}

});

Answer 2

To change the newly inserted item, you should use the sortable's receive event. However, as of today, there is a known limitation/missing feature in jQuery UI (1.8.11) so that you can't easily get access to the cloned item from the receive event. The existing ui.item references the original element, not the copy.

As a workaround, you can add a special class to the original item when dragging starts for which you can search the sortable's items on the receive event (which fires after the clone has been inserted into the DOM). At the end of the drag you have to make sure that whatever happens, no elements in your document should have the special class set. It's especially important if you're copying/cloning, as the sortable's receive event fires BEFORE the draggable's stop event (where we remove the special class from our original draggable).

http://jsfiddle.net/3Gkrf/1/

HTML:

<ul>
    <li id="test" class="dragme">Test</li>
</ul>
<ul class="sortme">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS:

.dragme { border:1px solid silver; width:50px; height:50px; }
.newitem { background-color:yellow; }

javascript:

$(function(){
    $(".sortme").sortable({
        receive: function(){
            $(this).find(".newitem").each(function(){
                $(this).removeClass("newitem");

                // Do your stuff with $(this), which is the newly created cloned item
            });
        }
    });

    $(".dragme").draggable({
        connectToSortable: ".sortme",
        helper: "clone",
        start: function(){
            $(this).addClass("newitem");
        },
        stop: function(){
            $(this).removeClass("newitem");
        }
    });
});

If you just want to create another instance manually whenever dragging stops, that's possible on the draggable's stop event. However, I don't think there is a reliable way in there to detect wether it was dropped on the sortable or somewhere else.

stop: function(){
   var clone = $(this).clone().appendTo("#wherever");
   // do anything else with the clone variable here
}

You have to manually clone your object, because even though you set the helper to clone it, the helper gets destroyed whenever dragging stops. If it WAS dropped on a sortable, you might end up with two new objects though, as the sortable automatically clones on receive.