jQuery UI和水平排序 - 拖动时向左移动的项目

Jor*_*ath 0 css jquery jquery-ui

例:

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

一旦我开始拖动一个元素,下一个元素会向左移动一点.

浮动元素是一个水平排序的常见解决方案,但我想知道是否有一种方法可以在开始拖动时停止项目的移动?

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; }
Run Code Online (Sandbox Code Playgroud)

Rom*_*ain 5

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

处理:

  • 在draggables div中添加p标签.
  • 删除可拖动div的填充,并将其移至新标记(此处为p)

你的好去=)

Here is an example:示例