jQuery UI:将项目从一个列表移动到另一个列表 [英] jQuery UI: moving items from one list to another

问题描述

虽然这个应该相对简单，但我不知道如何在UL s之间移动(而不是复制)LI元素.

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

我想要做的就是从列表 foo 中拖动任何项目到列表 bar (反之亦然)，而无需复制元素.

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

虽然connectToSortable几乎可以完全满足我的要求(尽管我更希望避免使用sortable)，但它会克隆元素-并通过对stop事件做出反应手动删除原始元素，结果并非如此如此简单(例如确保确实发生了有效的掉落).

While connectToSortable does almost exactly what I want (though 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).

一个简单的"hello world"示例将对我有很大帮助.

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

推荐答案

可以在此处找到Hello World示例: http://jqueryui.com/demos/sortable/#connect-lists .您完全不需要draggable，只需一个sortable.

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();
});

如果要禁止对一个列表中的项目进行排序，这可能是一种方法.但这并不是最漂亮的UI(给用户错误的希望)，并且用户还可以自由确定放置在外部列表中的位置.

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();
});

这是一个非常可怕的功能，可以解决我认为jQuery UI不完整的问题.它将发件人保存在sortstart上，并删除允许丢弃的标志.当输入另一个接收者时，它将检查它是否不是发送者，并设置该标志.在sortstop上检查标志.警告:此功能在用户和程序员看来都很难看，但是它可以正常工作.

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.

这篇关于jQuery UI:将项目从一个列表移动到另一个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！