[jQuery] ドラッグ&ドロップをカンタン実装!【はじめの一歩編】

2013.8.22 jQuery drag_drop1

こんにちは! ドラッグ&ドロップに夢中の いわだて (@dutchisover) です!今回はドラッグ&ドロップをサクッと実装する方法のはじめの一歩になる、【実装の仕方】についてです。
細かなオプションなどは コチラ でまとめていますのでよければ見て下さい!

drag_drop1

こんなのがカンタンにできますサンプル

jQueryUIを利用して簡易ToDoリスト的なモノをつくりました。

やることリスト
  • jQueryの勉強
  • WordPressの勉強
  • Objective-Cの勉強
  • Fireworksの勉強
  • ブログ書く
  • 就活
Todo

    ここへドロップ

カンタンなToDoリストです。左のリスト項目をドラッグして右のエリアにドロップしてみてください。色が変わって、チェックマーク(✓)も付きます。チェックマークをクリックすると登録したToDoリストが消えます。

今回はこのドラッグドロップをどうやって実装するか、を説明します!

【要素をドラッグさせる】のは超簡単!

まずはjQueryUI!

素のjQueryだけでは難しいので、jQueryUIというものを適用します。といってもやり方はhead内に以下を記述するだけです。

これでjQueryUIを使用する準備はOKです。

WordPressでjQueryUIを使う場合はこっち

また、WordPressでjQueryUIを適用させたい場合は上記の方法ではなく、 functions.php に下記を記述します。

このスクリプトはjQueryUI dialog を使ってモーダルダイアログ表示 | nyaou.comさんから拝借しました。

ドラッグさせたい要素を指定!

続いてjsファイルに記述します。

これだけです。これだけで下記サンプルのようになります。

サンプル

ドラッグしてみてください!

ドラッグして移動できるようになりました!ですが、このサンプルだと画面中どこでもドラッグして持って行けるし、初見おもしろいだけで使い道があんまりないです。
なので次は、ドロップできる場所、ドラッグ要素の受け皿になる場所を限定してみます。

ドロップできる要素を決める

さっきはドラッグしたい要素にdraggableというメソッドを記述しました。今度は紐付けしたいドロップ先の要素にsortableというメソッドを付けてみます。

これでドラッグしたい要素とその受け皿ができました。draggableにあるconnectToSortableというオプションはid名やclass名、DOM要素名を記述することでドロップ先を指定できます。

サンプル

ドラッグしてみてください!

ドロップしてください

オプションは次回にまとめます

さらにドラッグ要素のdraggableや、ドロップ要素のsortabledroppableにいろいろな付加要素(オプション)を付けることで、冒頭で紹介したサンプルのようないろんなことができるようになります。

オプションにあたるメソッドは次のように実装します。

書き方としては、

メソッド : 値

をひとグループとして命令を書いていきます。複数ある場合は命令の最後をカンマ(,)で区切ります。

次の記事でメソッド部分の何ができるかをまとめました。

記事はコチラからどうぞ!

最近の記事

Sponsored