Question

示例：

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

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

的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使用填充（padding：0.5em;）。您需要将其删除并为其创建一个新容器。

流程：

在draggables div中添加p标记。
删除可拖动div的填充，并将其移至新标记（p 这里）

你的好消息=）

Here is an example：Example

Answer 2

您需要声明占位符并在css中将其类定义为与元素完全相同的大小。代码如下，这是一个适合您的工作方式：http://jsfiddle.net/sP3UZ/2706/

此外，还有一个指向占位符文档的链接：http://api.jqueryui.com/sortable/#option-placeholder

HTML

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="ui-state-default">Home</div>
        <div id = "draggable2" class="ui-state-default">Contact Us</div>
        <div id = "draggable3" class="ui-state-default">FAQs</div>
    </div>
</div>

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; 
}
.sortable-placeholder {
    width: 150px; height: 35px; padding: 0.5em;
}

JS

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

祝你好运！

最佳，

约什

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

2 个答案:

HTML

CSS

JS