ドラッグ可能な要素を特定の要素に限定する方法

Question

JQuery UIでは、ドラッグ可能な要素をコンテナ内の特定の要素（.container）に制限しようとしています。

でも値の配列としてcontainmentを試してみましたが、私の場合は、.containerの高さと幅を認識しません。これを行うには適切なアプローチを教えてください。

<div class="container"> 
    <div class="restricted-field-1">should be restricted here</div> 
    <div class="dragme">DRAG ME</div> 
    <div class="restricted-field-2">should be restricted here</div> 
</div> 

$(".dragme").draggable({ 
    containment: ".container" 
}); 

JSFIDDLE

Answer 1

$(".dragme").draggable({ 
 
\t containment: ".mini" 
 
});

.container{ 
 
    position:relative; 
 
    width: 500px; 
 
    height: 400px; 
 
    background: #FFF; 
 
} 
 

 
.dragme{ 
 
    width: 100px; 
 
    cursor: move; 
 
    background: black; 
 
    color:white; 
 
    text-align:center; 
 
} 
 
.restricted-field-1{ 
 
    width:480px; 
 
    background: silver; 
 
    padding:10px; 
 
    user-select:none; 
 
    height: 20px; 
 
} 
 
.restricted-field-2{ 
 
    position:absolute; 
 
    width:480px; 
 
    bottom:0; 
 
    padding:10px; 
 
    background: silver; 
 
    user-select:none; 
 
    height:20px; 
 

 
    
 
} 
 
.mini{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 0px; 
 
    bottom: 40px; 
 
    
 
    width: 100%; 
 

 
    
 
}

<div class="container"> 
 
    <div class="restricted-field-1">should be restricted here</div> 
 
    <div class="mini"> 
 
    <div class="dragme">DRAG ME</div> 
 
    </div> 
 
    
 
    <div class="restricted-field-2">should be restricted here</div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Answer 2

あなたは、.dragmeをラップする.containerのdivを移動.containerのposition: relativeを削除して、スタイルの変更を次のように設定することができます。

次のように変更します。

.container { 
    position: absolute; 
    height: 362px; 
} 
.restricted-field-2 { 
    top: 400px; 
} 

Hereはjsfiddleリンクです。

編集：

が封じ込めのためのx-axisとy-axis位置を設定するにはドラッグ可能なjqueryの内のオプションがあり、私たちは私たちの要求に基づいて計算する必要があります。

Hereは更新されたjsのフィドルリンクです。