Question

在这个小提琴中，我试图混合使用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"
});
*/

（我刚刚注释掉冗余的可拖动调用以供参考。）

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

如何将JQuery UI的draggable和sortable与div元素混合使用？

1 个答案: