带有固定位置的 Jquery UI 可排序

Question

我有一些 sn-p 代码，它显示了两个相互连接的可排序列表。一切都很好。

演示 - jsFiddle example

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

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

我尝试在 li 元素中使用 span，然后断开列表并仅使用可拖动和可放置，但我不知道如何使其正确。我尝试了两种方法。

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

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

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

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

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

有人可以帮我解决这个问题，因为我处于死胡同。如果有什么没有很好的解释，请询问。提前致谢！

Answer 1

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

这里是 JS 的简短 sn-p：

$(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，具有这个 Fixed Class Attribute，可以放在两个列表中。

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

如果您想使用我的解决方案，您必须解决以下几种情况：

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

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

3) 制作适当的处理程序，以便可以直观地拖动节点。目前，您可以按字母（这是内部节点的处理程序）或黑色背景拖动 - 这就像内部节点容器的处理程序。

4) 让可拖动对象粘在放置区域上也可能是个好主意。

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

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

无论如何，我希望其中的一些对您有所帮助:)