在其他可拖动元素旁边拖动元素

Question

我正在尝试移动我所有的 <p> 元素，目前工作正常，但在测试时我发现了一个问题，当我将一个元素拖动到另一个元素旁边时，有时我无法拖动第一个再次元素，我为你创建了这个例子：

 $(function () {
   $(".draggable").draggable();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>


<div class="col-md-12">
  <p class="draggable">Drag me to the other div+</p>
</div>
<div class="col-md-12">
  <p class="draggable">Hello!</p>
</div>

只需尝试拖动此图像中的元素：

Dragging problem

因为它是 jQueryUI 代码，所以我不发布它。所以我的问题是，可能是什么问题，我该如何解决？也许我缺少属性或其他东西，但我是使用 jQueryUI 的新手，在此先感谢。

CodePen Example

Answer 1

<p> 的宽度为 100%，因此第二个在旧的所述位置超过第一个。添加边框或背景以查看。

现在，p 位于div 之下（同样原因无法移动）。添加z-index>0 以使p 覆盖任何div：

解决方案：http://codepen.io/anon/pen/YGLOEm