ドラッグアンドドロップの動きを取り入れてみた

jquery-uiライブラリのdraggable,droppableを使い

ドラッグアンドドロップの動きを取り入れることが出来たので使い方についてまとめてみました。

 

ライブラリの追加

 

使い方

・draggable

ドラッグ可能にしたいエリアを指定します。

 

・droppable

ドロップ可能にしたいエリアを指定します。

 

オプションの設定

draggable,droppableの引数にオプションを設定することで、細かい動きを再現することが出来ます。

使用したオプションを紹介します。

 

draggable

• helper：（original / clone）

掴む対象を設定します。

originalは元の要素、cloneは複製要素です。

 

• opacity：（0~1）

掴んだ要素の透明度を設定します。

0が透明、1が不透明です。

 

• revert：（valid / invalid）

掴んだ要素をドロップエリア外で離した際の戻り方を設定します。

validはその場で消えます。invalidは元の位置に戻っていきます。

 

• cursorAt：｛ top:数値 left:数値 ｝

カーソルの位置を調整します。

startオプションを使用することで、動的に数値を変更することも出来ます。

 

droppable

• accept：要素

ドロップを受け入れる要素を設定できます。

 

• over：function(event, ui) { 処理 }

ドロップエリアに重なった際に発火する処理を設定できます。

 

• out：function(event, ui) { 処理 }

ドロップエリア外の際に発火する処理を設定できます。

 

• drop：function(event, ui) { 処理 }

ドロップエリアでドロップされた際に発火する処理を設定できます。

 

注意点

・clone()で複製した要素にはdraggable,droppableの機能は複製されないため、再適用する必要がある。

・draggable,droppableいずれも適用する要素の指定を間違えると意図した挙動にならないため、適切な指定が必要。