将javascript函数应用于可拖动副本 [英] apply a javascript function to draggable copy

问题描述

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

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

推荐答案

要更改新插入的项目，您应该使用sortable的receive事件。但是，截至今天，jQuery UI（1.8.11）中存在已知的限制/缺失功能，因此您无法轻松地从receive事件访问克隆的项目。现有的ui.item引用原始元素，而不是副本。

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.

作为一种变通方法，您可以在拖动开始时为原始项添加一个特殊类，您可以搜索receive事件的可排序项（在将克隆插入DOM后触发）。在拖动结束时，您必须确保无论发生什么，文档中的任何元素都不应该设置特殊类。如果您正在复制/克隆，这一点尤为重要，因为可分类的接收事件在可拖动的停止事件之前触发（我们从原始可拖动事件中移除特殊类）。

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：

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
}

你有手动克隆您的对象，因为即使您设置帮助程序克隆它，每当拖动停止时，帮助程序都会被销毁。如果WAS掉落在可排序的上，你最终可能会得到两个新对象，因为可排序会自动克隆。

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.

这篇关于将javascript函数应用于可拖动副本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！