Geek asks and answers

Apply javascript function for draggable copy

I want to use the copie_contenue function, which changes the identifier of the div parent to the copy that I created after I dragged the original, but my script changed the original and not the copy, I also tried ui.helper instead, but nothing happened

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

To change a newly inserted item, you must use a sortable receive event. However, to date, jQuery UI (1.8.11) has a well-known restriction / absence function, so you cannot easily access the cloned element from a receive event. The existing ui.item refers to the source element, not the copy.

, ( , DOM). , , . , /, ( ).

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");
        }
    });
});

, , . , , , - .

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

, , , . , , .

+6

@DarthJDG: , draggable script

$(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
            }:
    }
    });
}

});

0

More articles:


All Articles