雑記
ドラッグアンドドロップの動きを取り入れてみた
Uga
公開日:2025/02/13
jquery-uiライブラリのdraggable,droppableを使い
ドラッグアンドドロップの動きを取り入れることが出来たので使い方についてまとめてみました。
ライブラリの追加
|
1 2 |
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"> |
使い方
・draggable
ドラッグ可能にしたいエリアを指定します。
|
1 2 3 4 5 |
$("#drag-area").draggable(); <div id="drag-area"> <p>ドラッグできます</p> </div> |
・droppable
ドロップ可能にしたいエリアを指定します。
|
1 2 3 4 5 |
$("#drop-area").droppable(); <div id="drop-area"> <p>ドロップできます</p> </div> |
オプションの設定
draggable,droppableの引数にオプションを設定することで、細かい動きを再現することが出来ます。
使用したオプションを紹介します。
draggable
-
helper：（original / clone）
掴む対象を設定します。
originalは元の要素、cloneは複製要素です。
- opacity：（0~1）
掴んだ要素の透明度を設定します。
0が透明、1が不透明です。
- revert：（valid / invalid）
掴んだ要素をドロップエリア外で離した際の戻り方を設定します。
validはその場で消えます。invalidは元の位置に戻っていきます。
- cursorAt：｛ top:数値 left:数値 ｝
カーソルの位置を調整します。
startオプションを使用することで、動的に数値を変更することも出来ます。
|
1 2 3 4 5 6 7 |
start: function(event,ui) { let width = ui.helper.outerWidth() / 2; let height = ui.helper.outerHeight() / 2; // カーソルを掴んだ要素の中央に設定 $("#drag-area").draggable("option", "cursorAt", { top: height, left:width }); } |
droppable
- accept：要素
ドロップを受け入れる要素を設定できます。
- over：function(event, ui) { 処理 }
ドロップエリアに重なった際に発火する処理を設定できます。
- out：function(event, ui) { 処理 }
ドロップエリア外の際に発火する処理を設定できます。
- drop：function(event, ui) { 処理 }
ドロップエリアでドロップされた際に発火する処理を設定できます。
注意点
・clone()で複製した要素にはdraggable,droppableの機能は複製されないため、再適用する必要がある。
・draggable,droppableいずれも適用する要素の指定を間違えると意図した挙動にならないため、適切な指定が必要。
