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

与世无争的帅哥 提交于 2020-03-04 06:22:36

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!