要素をドラッグしたときに要素をドラッグ可能にする方法

Question

私はdraggble jquery-uiライブラリを使用しています。

私は2つの要素draggable divと赤い矩形を持っています。

$("#toolbarArea").draggable();

.toolbarArea { 
 
    position: relative; 
 
    z-index: 100; 
 
    height: 30px; 
 
    width: 400px; 
 
} 
 

 
.exosphere { 
 
    border: solid 1px #333; 
 
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); 
 
} 
 

 
#toolbarTitle { 
 
    cursor: all-scroll; 
 
    background-color: #ffffff; 
 
    width: 30px; 
 
    height: 100%; 
 
    float: right; 
 
} 
 

 
#rslt { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
 

 
<div id="toolbarArea" class="toolbarArea exosphere" data-Owner="geomind" data-Date="11/2016"> 
 

 
    <span id="toolbarTitle" width="15px" height="15px" class="fa-stack fa-lg"> 
 
     <i class="fa fa-arrows" aria-hidden="true"></i> 
 
    </span> 
 

 
    <iframe id="frTools" style="width:90%;height:25px;overflow: hidden;"></iframe></div> 
 
<div id="rslt"></div>

私は赤い長方形が、それはドラッグtoolbarArea位置を繰り返し行う必要があります。

toolbarArea div内に赤い四角形を入れたくありません。

Answer 1

私が正しく理解している限り、あなたは赤い四角形とツールバーを同時に動かそうとしていますか？

次に、HTMLブロック全体を別のブロックにラップする方法はありますか？

<div id="newId"> 


<div id="toolbarArea" class="toolbarArea exosphere" data-Owner="geomind" data-Date="11/2016"> 

    <span id="toolbarTitle" width="15px" height="15px" class="fa-stack fa-lg"> 
     <i class="fa fa-arrows" aria-hidden="true"></i> 
    </span> 

     <iframe id="frTools" style="width:90%;height:25px;overflow: hidden;"></iframe> 

       </div> 

      <div id="rslt"></div> 
      </div> 

あなたは、その後にJSを変更します。私はあなたを理解していた場合

$("#newId").draggable(); 

Answer 2

、ツールバーが移動されるようredsquareを移動したいですか？

この場合、thisに似たカスタムjQuery関数を使用できます。そのblogpostで説明されている関数を使用すると、要素がいつ移動されたかを見ることができます。それが移動されるたびに、あなたはこれを行うことによって、それらの座標を持つ別の要素を更新することができます。

$('#rlst').offset($('#toolbarArea').offset()); 

それは完璧ではありませんが、私は、これは独立した2つの要素を維持するための最良の方法だと思いますし、それらを中に移動してい相互に関連して。

Answer 3

あなたが持っているjQuery Draggable Eventsをご覧ください。start、stop、dragここで

例：

$("#toolbarArea").draggable({ 
 
    start: function() { 
 
    $('#rslt').css('position', 'relative') 
 
    }, 
 
    drag: function() { 
 
    $('#rslt').offset($('#toolbarArea').offset()); 
 
    }, 
 
});

.toolbarArea { 
 
    position: relative; 
 
    z-index: 100; 
 
    height: 30px; 
 
    width: 400px; 
 
} 
 

 
.exosphere { 
 
    border: solid 1px #333; 
 
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); 
 
} 
 

 
#toolbarTitle { 
 
    cursor: all-scroll; 
 
    background-color: #ffffff; 
 
    width: 30px; 
 
    height: 100%; 
 
    float: right; 
 
} 
 

 
#rslt { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="toolbarArea" class="toolbarArea exosphere" data-Owner="geomind" data-Date="11/2016"> 
 

 
    <span id="toolbarTitle" width="15px" height="15px" class="fa-stack fa-lg"> 
 
     <i class="fa fa-arrows" aria-hidden="true"></i> 
 
    </span> 
 

 
    <iframe id="frTools" style="width:90%;height:25px;overflow: hidden;"></iframe> 
 

 
</div> 
 

 
<div id="rslt"></div>

あなたあなたは要素間の元の相対的な距離を保つ必要がある場合は、いくつかのより多くのロジックを追加することを確認する必要のために。

しかし、あなたはツールバーの動きと赤いボックスの間にいくらかの遅延があるので、その解決策は最適ではないことがわかります。しかし、それはjQueryの制限です。