他のドラッグ可能な要素の隣の要素をドラッグ

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>「sの100％の幅を有しているので、もう一つは古い位置で前記最初の上にあります。ボーダーやbgを追加してそれを確認してください。

今、pはdiv（同じ理由で移動できません）の下にあります。私が見http://codepen.io/anon/pen/YGLOEm