开发者

jQuery UI: moving items from one list to another

开发者 https://www.devze.com 2023-01-03 20:55 出处:网络
While this should be relatively straightforward, I can\'t figure out how to move (rather than copy) LI elements between ULs.

While this should be relatively straightforward, I can't figure out how to move (rather than copy) LI elements between ULs.

All I want is to drag any item from list foo to list bar (or vice versa) without duplicating the element.

While connectToSortable does almost exactly what I want (th开发者_如何学运维ough I'd prefer to avoid sortable), it clones the element - and manually removing the original element by reacting to the stop event turns out to be not so easy (e.g. ensuring that a valid drop actually happened).

A simple "hello world" example would help me greatly.


A Hello World example can be found here: http://jqueryui.com/demos/sortable/#connect-lists. You don't need a draggable at all, only a sortable.

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});

If you want to disallow the sorting of items within one list, this may be a way to go. It's not the most beautiful UI though (the user is given false hope), and the user is also free to determine the drop position in a foreign list.

$(function() {
    var sender;
    var recvok = false;
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        start: function() {
            sender = $(this);
            recvok = false;
        },
        over: function() {
            recvok = ($(this).not(sender).length != 0);
        },
        stop: function() {
            if (!recvok)
                $(this).sortable('cancel');
        }
    }).disableSelection();
});

This is a really horrible function working around what I feel is an incompleteness in jQuery UI. It saves the sender on sortstart and takes down a flag allowing drop. When another receiver is entered, it checks if it's not the sender and puts the flag up. On sortstop the flag is checked. Warning: this function is ugly to the eye of both the user and the programmer, but it works.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号