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

发布于 2024-10-13 02:58:40 字数 521 浏览 2 评论 0原文

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

我在 jsfiddle 上找到了一些东西： http://jsfiddle.net/d8nieldonaldson/smYeh/3/< /a>

这是一些代码：

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

任何帮助将不胜感激。

谢谢！

原文

i have 2 lists, one draggable(#object) and one sortable(#target).
i would like to drag a clone to the sortable list and then do some things to the clone once it is in the sortable list.

i've got something up on jsfiddle: http://jsfiddle.net/d8nieldonaldson/smYeh/3/

here's some of the code:

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

any help would be greatly appreciated.

thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沩ん囻菔务 2024-10-20 02:58:40

您正在调整 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);

示例链接。

You are resizing the li element and not the img!
Anyway, even doing so will resize the helper (using stop) but when inserted the element to the list it'll return to the original, so I've modified the code and added animate to a better user experience ;-) :

(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.

回复收藏 0 原文

~没有更多了~