jQuery UI 拖放——可拖动元素不会水平移动？答案

【问题标题】：jQuery UI Drag and Drop—Draggable elements won't move horizontally?jQuery UI 拖放——可拖动元素不会水平移动？
【发布时间】：2016-01-12 21:32:55
【问题描述】：

我正在学习 jQuery UI 拖放。我有香草代码。我希望可拖动对象能够水平和垂直拖动。由于某种原因，可拖动对象还不会水平移动。

JS：

$('.draggable').draggable({
    containment: '#containerForDraggables',
});

HTML：

<div id="containerForDraggables">
    <p class="draggable">Draggable #1</p>
    <p class="draggable">Draggable #2</p>
    <p class="draggable">Draggable #3</p>
</div>

这是一个 jsfiddle：

https://jsfiddle.net/VikR0001/dv48y1rb/15/

我错过了什么？

非常感谢大家提供任何信息。

【问题讨论】：

您的.draggable 元素是全宽的。因此，它们不能左右移动而仍留在容器内。尝试添加静态宽度或将它们设置为内联元素。

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您无法水平拖动 p 元素，因为您已将 containment 设置为其父元素，并且默认情况下它们的宽度为 100%（因为它们是块级元素）。

您可以在元素上设置小于其父元素100% 的宽度。或者，更好的选择是浮动元素，以便它们根据其内容具有"shink-to-fit" width：

Updated Example

#containerForDraggables .draggable {
  cursor: pointer;
  float: left;
  clear: both;
}

将display 设置为inline-block 也可以，但是您将无法使用clear: both 将元素换行。

【讨论】：