jquery - 将 javascript 函数应用于可拖动副本

Question

我想应用名为 copy_contenue 的函数来更改 div 父 ID 在我拖动原件后创建的副本上，但我的脚本更改了原件而不是副本我也尝试了 ui.helper 来代替它，但没有任何反应

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

Answer 1

要更改新插入的项目，您应该使用可排序的接收事件。然而，截至今天，jQuery UI (1.8.11) 中有一个已知的限制/缺失功能，因此您无法轻松地从接收事件访问克隆的项目。现有的 ui.item 引用原始元素，而不是副本。

作为解决方法，您可以在拖动开始时向原始项目添加一个特殊的类，您可以在接收事件(在将克隆插入到 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
}

您必须手动克隆对象，因为即使您设置助手来克隆它，只要拖动停止，助手就会被销毁。如果它被放在可排序上，那么您最终可能会得到两个新对象，因为可排序在接收时会自动克隆。