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

Jer*_*amp 13 javascript jquery jquery-ui jquery-ui-sortable

也许我不明白克隆如何与sortable一起工作,但这就是我想做的事情.

在对项目进行排序时,我想要拖动项目的克隆,直到我停止将项目放在新位置.

这是代码:

<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>
Run Code Online (Sandbox Code Playgroud)

在此先感谢您的帮助!

Joh*_*soe 14

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

PS我用Firebug来看看原始元素发生了什么.如果你没有使用它,你真的应该是!


sim*_*rsh 13

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

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

  • $(ui.item).show()会更"准确" (11认同)