javascript - 将元素拖动到其他可拖动元素旁边

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