使用带有 JQuery 可拖动的内联块时，如何阻止列表项跳转？

Posted 2023-05-08

【中文标题】使用带有 JQuery 可拖动的内联块时，如何阻止列表项跳转？

【英文标题】：How do I stop List Items from jumping when using inline-block with JQuery draggable?

【发布时间】：2012-11-10 08:11:49

【问题描述】：

刚刚发现了 JQuery 的“可拖动”API 的乐趣，但我想使用 inline-block 显示我的列表。这会使列表项在您拖动它们时会跳动，有人知道如何解决这个问题吗？

我使用的代码是：

   $(function() 
        $( "#sortable1, #sortable2" ).sortable(
            connectWith: ".connectedSortable"
        ).disableSelection();
    );​

http://jsfiddle.net/VVaqu/

【参考方案1】：

如果你不能使用浮动，另一种解决方案：

#sortable1 li, #sortable2 li
    display: inline-block;
    vertical-align: top;

vertical-align:top 很重要。

【参考方案2】：

Fiddle demo

只需将：float:left; 添加到您的 li 元素中

#sortable1 li, #sortable2 li 
 float:left;
 /*other styles...*/

【讨论】：

非常感谢！这很好用。我将尝试扩展这个项目，这样我就可以使用这个来保存新职位：***.com/questions/7097168/…。你认为这会奏效吗/有什么建议吗？

@Roko C. Buljan，我可以请您在这里查看一个与 jQuery 可拖放相关的问题（赏金添加）：***.com/questions/54498364/… 吗？