jQuery UI 和水平可排序 - 元素在拖动时向左移动

Question

例子:

http://jsfiddle.net/sP3UZ/2675/

只要我开始拖动一个元素，下一个元素就会向左移动一点。

float 元素是实现水平排序的常见解决方案，但我想知道是否有办法在您开始拖动时阻止元素移动？

CSS:

#draggable1 { background:#ff0000; width: 150px; height: 35px; padding: 0.5em; }
#draggable2 { background:#00ff00; width: 150px; height: 35px; padding: 0.5em; }
#draggable3 { background:#0000ff; width: 150px; height: 35px; padding: 0.5em; }

#sortable { width: 700px; height: 35px;  }

#sortable > div { float: left; }

Answer 1

这是因为您为每个可拖动的 div 使用了填充(填充:0.5em；)。 您需要将其删除并为其创建一个新容器。

过程:

• 在你的 draggables div 中添加 p 标签。
• 删除可拖动 div 的填充并将其添加到新标签 (p 这里)

一切顺利 =)

这是一个例子:Example