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

Question

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

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/

我错过了什么？

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

Answer 1

您不能水平拖动 p 元素，因为您已将 containment 设置为其父元素，并且默认情况下它们的宽度为 100%（因为它们是 block-level个元素）。

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

Updated Example

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

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