jquery 可排序拖动但不能自行排序

Question

我正在创建一个交互式菜单，人们将在其中使用 JSON 字符串输入一个链接列表，这些链接将依次排序并变成一个 cookie 以记住排序值。我只是完成了一般的 html、javascript 和 css 框架，然后我会考虑将其移植到插件中。

单击我的编辑按钮时，我可以将我的可排序对象拖到并移动它。然而释放它并没有保持它的新位置。其他项目 'shift across' 悬停时也不会像预期的正常可排序功能那样。

我没有和 Jquery UI 一起工作过。所以我不太熟悉它，我很确定我错过了一些明显的东西。

JS

 $(".menu-bar-item").sortable({
                axis: "x",
                cursor: "move",
                opacity: 0.5
            });

HTML

<ul id="menu-bar">
            <li class="menu-bar-item ui-state-default" id="twitter">
                <a href="http://twitter.com" class="menu-bar-link">
                    <img class="menu-bar-image" src="/demo-icons/twitter.png" />
                </a>
            </li>
            <li class="menu-bar-item ui-state-default">
                <a href="#" class="menu-bar-link">
                    <img class="menu-bar-image" src="http://placehold.it/75" />
                </a>
            </li>
            <li class="menu-bar-item ui-state-default">
                <a href="#" class="menu-bar-link">
                    <img class="menu-bar-image" src="http://placehold.it/75" />
                </a>
            </li>
</ul>

http://jsfiddle.net/pk27226e/

Answer 1

不是在单个项目上触发可排序插件，而是在父列表上执行它，以便排序，而不是项目的 "children"。

$('#menu-bar').sortable();

这将获得正确元素的可排序性。

jquery 可排序拖动但不能自行排序

jquery sortable dragging but not sorting itself

javascript

jquery

html

css

jquery-ui