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

【问题标题】：jquery ui draggable stop function on clone克隆上的jquery ui可拖动停止功能
【发布时间】：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");
    }
});

任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： jquery user-interface clone draggable

【解决方案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.

【讨论】：