jQuery UI Drag-Drop-Draggable元素不会水平移动？

Question

我正在学习jQuery UI Drag and Drop。我有香草代码。我希望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%（因为它们是块状的 - 等级元素）。

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

Updated Example

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

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