jquery可排序拖动但不排序本身答案

【问题标题】：jquery sortable dragging but not sorting itselfjquery可排序拖动但不排序本身
【发布时间】：2015-01-21 21:19:05
【问题描述】：

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

当我的编辑按钮被点击时，我可以将我的可排序对象拖到并移动它。但是释放它并不会保持其新位置。当悬停在上面时，其他项目也不会像预期的正常可排序功能那样“移动”。

我没有使用过很多 Jquery UI。所以我不太熟悉它，我很确定我错过了一些明显的东西。

 $(".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/

【问题讨论】：

您应该在父节点上激活可排序，而不是在子节点上。所以，$('#menu-bar').sortable();
-.- 哇。给我一个答案并确认它......真是个白痴！

标签： javascript jquery html css jquery-ui

【解决方案1】：

不要在单个项目上触发可排序插件，而是在父列表上执行它，以便排序，而不是项目的“孩子”。

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

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

【讨论】：