Ziehen Element neben anderen ziehbaren Element

Question

Ich versuche, alle meine <p> Elemente zu bewegen, funktioniert im Moment gut, aber während ich testete sah ich ein Problem, wenn ich ein Element neben dem anderen ziehen manchmal bin ich nicht Lage wieder das erste Element zu ziehen, erstelle ich dieses Beispiel für Sie:

$(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>

versuchen Sie einfach, die Elemente wie in diesem Bild zu ziehen:

Dragging problem

Weil es jQueryUI Code ist, poste ich es nicht. Also meine Frage ist, was könnte das Problem sein und wie kann ich es lösen? Vielleicht vermisse ich Eigenschaften oder etwas, aber ich bin neu mit jQueryUI, danke im Voraus.

CodePen Example

Answer 1

<p> ‚s 100% Breite haben, so dass das zweite über das erste in der alten Position ist, sagte. Fügen Sie border oder bg hinzu, um das zu sehen.

Nun ist unter div (kann nicht aus dem gleichen Grund verschoben werden). In z-index> 0 zu machen, die p über jede div:

Lösung: http://codepen.io/anon/pen/YGLOEm