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

时间:2011-04-21 08:58:53

标签: jquery jquery-ui clone draggable

我想应用名为copie_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"));
    }
    })

2 个答案:

答案 0 :(得分:6)

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

作为一种变通方法,您可以在拖动开始时为原始项添加一个特殊类,您可以在其上搜索receive事件的可排序项(在将克隆插入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
}

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

答案 1 :(得分:0)

@DarthJDG:实际上它可以工作,但我在可拖动脚本中包含了我的可排序谢谢

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

});