1

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

演示 - jsFiddle 示例

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

我想将位置 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 元素内。

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

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

4

1 回答 1

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，具有此 Fixed Class 属性，可以在两个列表中拖放。

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

如果您想使用我的解决方案，则必须解决一些情况，例如：

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

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

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

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

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

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

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

于 2013-03-12T05:17:52.050 回答