Question

也许我不明白克隆如何与可排序一起工作，但这就是我想要做的。

在对项目进行排序时，我希望保留拖动项目的克隆，直到我停止将项目放在新位置。

以下是代码：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

    <style type="text/css">
        .sort { width: 150px; }
        .ui-state-highlight { background-color: #000; height:2px; }
    </style>
</head>
<body>
    <div>
        <ul class="sort">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <script type="text/javascript">
        $(function() {
            $('.sort').sortable({
                helper: 'clone',
                placeholder: 'ui-state-highlight',
                opacity: '.5'
            })
        })
    </script>
</body>
</html>

提前感谢您的帮助！

Answer 1

使用克隆选项时，开始拖动时隐藏原始项目style="display: none"。您可以将处理程序附加到sort事件（或隐藏原始项目的任何事件）以重新显示它。那么一切都应该适合你。

P.S。我使用Firebug来查看原始元素发生了什么。如果你没有使用它，你真的应该是！

Answer 2

它只是破解它的一种方法。你可以从这里开始。更改您的配置如下。

        $('.sort').sortable({
            helper: 'clone',
            placeholder: 'ui-state-highlight',
            opacity: '.5',
            start: function(event, ui) {
              $('.sort').find('li:hidden').show();
            }
        })

Answer 3

我有两个列表，sortable1和sortable2。我想将sortable1中的项目克隆到sortable2，反之亦然。

一个改进必须是检查它是否是顶级元素，如果是的话。 prev（）不起作用。因此，检查是否有上一个，如果没有使用后（）。

我的解决方案是：

$("#sortable1").sortable({
        helper:"clone",
        connectWith: "#sortable2",
        start:function(event,ui){
            $(ui.item).show();
            clone = $(ui.item).clone();
            before = $(ui.item).prev();
        },
        stop:function(event, ui){
            before.after(clone);
        }
    }).disableSelection();
$("#sortable2").sortable({
        helper:"clone",
        connectWith: "#sortable1",
        start: function(event, ui){
            $(ui.item).show();
            clone = $(ui.item).clone();
            before = $(ui.item).prev();
        },
        stop:function(event, ui){
            before.after(clone);
        }
    }).disableSelection();

Answer 4

虽然它可能无法解决您遇到的问题。参数末尾有一个额外的逗号。

opacity: '.5',

Answer 5

关于John Bledsoe所说的改进的几句话。为了克隆＃sortable1中的第一个元素，我使用了这样的代码：

    stop:function(event, ui){
        if (before.length) before.after(clone);
        else $(this).prepend(clone);
    },

可排序的克隆助手无法正常工作

5 个答案: