jQuery UI拖放-可拖动元素不会水平移动吗? [英] jQuery UI Drag and Drop—Draggable elements won't move horizontally?

问题描述

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

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>

这是一个jsfiddle:

Here's a jsfiddle:

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

我想念什么?

非常感谢所有人提供任何信息.

Thanks very much in advance to all for any info.

推荐答案

您不能水平拖动p元素，因为您已将containment设置为其父元素，并且默认情况下其宽度为100% (因为它们是块级元素).

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).

您可以在元素上设置小于其父元素的100%的宽度.另外，更好的选择是浮动元素，使它们具有根据其内容:

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:

更新示例

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

将display设置为inline-block也可以，但是您将无法使用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.

这篇关于jQuery UI拖放-可拖动元素不会水平移动吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！