克隆上的jquery ui可拖动停止功能

Posted 2023-05-08

【中文标题】克隆上的jquery ui可拖动停止功能

【英文标题】：jquery ui draggable stop function on clone

【发布时间】：2011-06-13 19:29:57

【问题描述】：

我有 2 个列表，一个可拖动（#object）和一个可排序（#target）。 我想将一个克隆拖到可排序列表中，然后在克隆进入可排序列表后对其执行一些操作。

我在 jsfiddle 上有一些东西：http://jsfiddle.net/d8nieldonaldson/smYeh/3/

这里是一些代码：

$("#object li").draggable(
    connectToSortable: "#target",
    opacity: 0.5,
    helper: "clone",
    revert: "invalid",
    stop: function(e , ui) 
        ui.helper.css("width" , "140px");
    
);

任何帮助将不胜感激。

谢谢！

【参考方案1】：

您正在调整 li 元素而不是 img! 无论如何，即使这样做也会调整帮助器的大小（使用stop），但是当将元素插入到列表中时，它将返回到原始状态，因此我修改了代码并添加了动画以提供更好的用户体验；-)：

(function($) 

    $("#target").sortable(
        revert: true,
        update: function(e, ui) 
            if (ui.item.hasClass('ui-draggable')) ui.item.find('img').animate(
                width: "140px"
            )
        
    );
    $("#object li").draggable(
        connectToSortable: "#target",
        opacity: 0.5,
        helper: "clone",
        revert: "invalid"
    );
    $("ul, li").disableSelection();
)(window.jQuery);

Example link.