jQuery UI Drag and Drop—Draggable elements won't move horizontally?

问题

I'm learning jQuery UI Drag and Drop. I've got vanilla code. I'd like the draggables to be able to drag horizontally and vertically. For some reason the draggables won't move horizontally yet.

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>

Here's a jsfiddle:

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

What am I missing?

Thanks very much in advance to all for any info.

回答1:

You can't drag the p elements horizontally because you have containment set to their parent element and they have a width of 100% by default (since they are block-level elements).

You could either set a width on the elements that is less than 100% of its parent element. Alternatively, the better option would be to float the elements so that they have a "shink-to-fit" width based on their contents:

Updated Example

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

Setting the display to inline-block would work as well, but then you wouldn't be able to use clear: both to break the elements to new lines.

来源：https://stackoverflow.com/questions/34754168/jquery-ui-drag-and-drop-draggable-elements-wont-move-horizontally