javascript - 如何将 JQuery UI 的可拖动和可排序与 div 元素混合？

Question

在这个 Fiddle 中，我试图混合 JQuery UI 的 draggable和 sortable实用程序，问题是出于某种原因我的 <div>当我拖放元素时，元素会奇怪地四处移动。我认为它可能来自 display: inline-block;属性，但我无法删除它。我怎样才能摆脱这种恼人的副作用？

jsfiddle.net/Zh83n

注意:仅在 Chrome 上进行了测试，因为它是我的项目必须支持的唯一浏览器。

Answer 1

如果您只是想使单个列表可排序，.draggable() 是多余的。查看http://jsfiddle.net/peterjmag/Zh83n/3/举个例子。

HTML

<div id="sortable">
    <div class="disp">Test1</div>
    <div class="disp">Test2</div>
    <div class="disp">Test3</div>
    <div class="disp">Test4</div>
    <div class="disp">Test5</div>
</div>

CSS

.disp {
    display: inline-block;
}

JS

$("#sortable").sortable({
    revert: true
});

/*
$(".disp").draggable({
    connectToSortable: "#sortable",
    revert: "invalid"
});
*/

(我刚刚注释掉了多余的可拖动调用以供引用。)

请注意，我的 fiddle 仍然存在一些间距问题，这确实与 display: inline-block 有关。查看以下答案，了解解决该问题的几种不同方法:https://stackoverflow.com/a/14317901/349353 .