Rotate your phone

YOSHISUGA My Portfolio

Blog

jQuery UI を使ったドラッグアンドドロップ、要素の並び替え

今更ですが、jQuery UIを使ってみました。jQueryではたくさんのライブラリが開発されており、その中にjQueryの公式チームが開発したjQuery UIというライブラリがあります。

jQuery UIとは

jQuery UIはjQueryの拡張ライブラリです。これを導入すれば機能を追加することができ、よりインタラクティブな操作が可能になります。jQuery UIは単体では動作しないので、jQuery本体のファイルと一緒に読み込めばその機能を使うことができます。読み込む順番はjQuery本体→jQuery UIです。以下はCDNで読み込んでいます。タッチデバイスでjQuery UIを有効にするために、jQuery Touch Punchを読み込んでいます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

jQuery UIを使ってドラッグアンドドロップを行うにはインタラクションを使用します。
draggable
ドラッグに関するインタラクション
droppable
ドロップに関するインタラクション
Sortable
ドラッグアンドドロップで要素の並び替えができるインタラクション
これらを使ってインタラクションを実装していきます。

要素をドラッグする

ドラッグに関してはdraggableを使用します。下記はミニマムコードになります。

See the Pen ExNKVvo by yoshiyuki suganuma (@yoshisuga) on CodePen.

ドラッグを動作させているのは以下の部分になります。

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

id名 targetの要素に対してdraggableを紐付けしています。これだけで自由にドラッグできるようになります。
括弧の中に波括弧”{}”を入れてあげるとオプションを指定できるようになります。

$( "#target" ).draggable({
opacity: 0.5,//ドラッグ中の不透明度を指定
cursor: 'pointer',//ドラッグ中のカーソルを指定
containment: 'parent' or '#特定の要素のid名',//draggable要素の移動範囲を限定する、これを指定しないと要素や画面幅を超えて移動できてしまう。
});

目的の場所へドロップする

次に、ドラッグした要素を目的の場所へドロップします。ドロップに関してはdroppableを使用します。

先ほど同じようにドロップされる要素に対してdroppableをバインドします。acceptのところでdraggable要素をdroppable要素にバインドしています。(お腹いっぱいにすると何かあるかも？)

See the Pen jquery ui 2 by yoshiyuki suganuma (@yoshisuga) on CodePen.

要素をドラッグ&ドロップで並び替える

続いてsortableも使ってみました。並び替えたい複数の要素の親要素にsortableを使用します。並び替えたリストの順番を取得するには、並び替えるたびにイベントが走る「update」を使い、sortableの引数に「toArray」を使います。toArrayを渡すことにより各リストのid値を配列で取得できます。サンプルでは取得したid値を改行して表示しています。

See the Pen GRNZYwd by yoshiyuki suganuma (@yoshisuga) on CodePen.

他にも色々とオプションが用意されていて、うまく使えばいろいろなことができそうです。こちらがjQuery UIの日本語リファレンスになります。

さらにアコーディオン等、様々なインタラクションが用意されているので 色々調べてみるのも面白いかもしれません。jQuery UIのデモになります。

Blog一覧へ戻る