divで関数の作業をドラッグする方法

Question

jQueryのドラッグアンドドロップ機能をドラッグすると、ブラウザ全体に移動します。私はいくつかの特定の高さを修正する必要があり、幅のドラッグは特定の固定サイズでしか動作しません。これを行う方法？

Answer 1

コンテナ<div>を使用して、jQuery draggable関数を呼び出すことができます。このjQuery Ui exampleも参照してください。

$(".example").draggable({ 
 
    containment: ".box" 
 
});

.box { 
 
    border: solid 1px black; 
 
    width: 200px; 
 
    height: 150px; 
 
} 
 
.example { 
 
    border: solid 1px black; 
 
    width: 90px; 
 
    height: 90px; 
 
}

<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 class="box"> 
 
    <div class="example">Drag me</div> 
 
</div>