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

Posted 2023-02-22

【中文标题】将 javascript 函数应用于可拖动副本

【英文标题】：apply a javascript function to draggable copy

【发布时间】：2011-08-10 03:41:40

【问题描述】：

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

【问题讨论】：

恢复我想要的是删除助手但不使用 .droppable

您只想将其放入您连接的可排序对象中，还是用户释放鼠标按钮的任何位置？

@DarthJDG 仅在我连接的可排序对象上

【参考方案1】：

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

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

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

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

【讨论】：

我试过了，但它似乎不起作用..我的问题是无论如何我都可以在不使用 .sortable 的情况下使用 .draggable 格式

嗯，它在 jsfiddle 上工作，也许问题出在其他地方。你在使用最新的 jQuery 和 jQuery UI 库吗？目前，如果您想将其放到可排序的对象上，我不知道有其他方法。没有可靠的方法可以从可拖动的事件中检测到它。我在答案的末尾添加了一些额外的行...

【参考方案2】：

@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
            :
    
    );

);