Question

我有一些代码片段，它们提供了两个相互连接的可排序列表。一切都很好。

在演示中，字母会在可排序的开头或结尾处或之间删除。一般来说，所有字母都被消除，没有空格。这是可排序的自然行为。但现在我想以不同的方式移动（拖放）字母。

我想将位置3 [例如字母N]的字母移到下面列表中的位置3而不是左侧。除了我希望可排序列表[现在没有字母N]不被消除，但它们之间的差距应该保持不变。除了我想在ul元素上保持可排序的行为，以便我能够相互对字母/空格进行排序，将间隙移到其他地方，但只能在相同的可排序列表上。

我尝试用li元素中的span来做，然后断开列表并使用draggable和droppable，但我不知道如何使它正确。我试过两种方法。

FIRST：向li元素添加span，以便li元素成为某种存储桶（每个存储桶中只能有一个字母）。然后添加：

    $("#letters li span").draggable({
         connectToSortable: "#subword",
         revert: "invalid"
    });

    $("#subword li span").draggable({
         connectToSortable: "#letters",
         revert: "invalid"
    });

但它只将span放在sortable的末尾，而不是放在我拖放的li元素内。

SECOND：添加li droppable和span draggable，但是我不能在li上使用sortable。我总是会拖动在li之上的span元素。

有人可以帮助我，因为我已经走到了尽头。如果没有很好的解释，请询问。提前谢谢！

Answer 1

演示：http://jsfiddle.net/proqb/5qupZ/

以下是JS的简短片段：

$(function () {
    $("#sortable1").sortable();
    $("#sortable2").sortable();

    $(".droppable").droppable({
        accept: ".alienNode",
        drop: function (event, ui) {

                    ui.draggable.parent().droppable("enable");

            $(this).append("<div class='alienNode'>" + ui.draggable.html() + '</div>');

            ui.draggable.remove();

            $(this).find(".alienNode").draggable({
                handle: ".handler",
                revert: "invalid"
            });

            $(this).droppable("disable");

        }
    });

    $(".prerender").droppable("disable");

    $(".alienNode").draggable({
        handle: ".handler",
        revert: "invalid"
    });
});

此解决方案的一般概念是您不使用connectedSortable。

有2个可排序列表。每个List都包含Draggable Droppables（现在是透明的 - 如果你想看到它们 - 你可以给它们背景颜色属性）。那些子节点只接受具有某个类属性的元素，因此您只能删除其中的特定节点。最后有一个内部节点，它是一个具有此固定类属性的纯Draggable，可以在两个列表中删除。

可排序列表的长度当然可以动态更改，因此您不必使用固定数量的起始元素限制自己，但这取决于您和您的需求。

如果您想使用我的解决方案，您可能需要解决几个案例，例如：

1）onRevert事件的自定义（它不是JQuery中定义的事件，它的错误可能导致节点重复），或者你可以用其他东西替换它的机制。

2）为可排序的UL-s制作背景图像网格，这样您就可以查看元素的拖动位置，或者可能实现占位符机制。

3）制作适当的处理程序，以便可以直观地拖动节点。 Currenty你可以通过字母（这是内部节点的处理程序）或黑色背景来拖动 - 它就像内部节点容器的处理程序一样。

4）让拖钓者坚持下降区域可能也是一个好主意。

我不认为您之前开发的机制可以在我的解决方案中工作，但您可以尝试在我的示例中重新实现它。

最后 - 如果你遇到任何其他问题你可以随时切换到YUI，如果你想更快更准确地定制机制，有更多的选项，这里是拖放部分：http://yuilibrary.com/yui/docs/dd/ :)

我希望其中一些对你有所帮助:)。

Jquery UI可以使用固定位置进行排序

1 个答案: