Question

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

任何帮助将不胜感激。

谢谢！

Answer 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

克隆上的jquery ui draggable stop函数

1 个答案: