どうも、WEBおじさんです。
本日は【jQuery UI】というライブラリを使って、なんとWEBサイト上でドラッグアンドドロップをするとコンテンツが入れ替わるという、なんとも近代的というか、未来的というか、直感的というか、とにかくちょっとカッコイイ動きを取り入れてみようじゃないか、という試みです。
本来こういう動きってすごくハードルが高い気がするんですよ。
まぁ、実際自分で1から作ろうと思ったらかなりハードル高めで技術も知識もないと実現できないと思うんですが、これがそれほど技術も知識もなくても取り入れることができてしまうのがこの【jQuery UI】というものです。
そもそもjQuery UIって何？
っていうか、jQueryというのは言語でいうとJavaScriptで、JavaScriptでできるいろんなことを簡単にできるようにするためのライブラリです。
※ライブラリっていうのは、辞書というか、翻訳機のようなものと考えていただけるとわかりやすいかもです。
まぁ、jQueryについては前にも少し話してるので、知りたい方はこちらからどうぞ。
で、jQueryはライブラリなのですが、これをUI（ユーザーインターフェース：つまり、見た目）に特化してさらに深く、いろんなことができるように作ったライブラリが【jQuery UI】というわけなのです。
つまり、ライブラリのライブラリってわけ（たぶんｗ）。
というわけで、早速使う準備から。
こちらもjQueryと同じように、専用の外部ファイルを読み込ませるわけですが、もちろんどっかからダウンロードしてきてもいいのですが、さすがGoogle Hosted Librariesですね！
jQuery UIもキッチリ用意されていますので、こちらから拝借しましょう！ｗ
で、読み込ませたら準備完了です！
あ、もちろんjQueryファイルも読み込ませるのを忘れずにね。
UIのファイルの前に記述しましょう。
jQueryUIは色んなことができると思うんですけど、今回は記事のタイトルにもある通り、ボクが仕事で使用した機能というか、動きを解説しますね。
やりたいことは<tr>の入れ替え
今回実現させたかったことは、ドラッグアンドドロップでtr要素を入れ替える、という動きです。
ボクもそんなに素人ではないので、まずは自身でjQueryを使って作ろうと思ったのですが、ここでボクの前に立ちはだかったのが「ドラッグアンドドロップ」というイベントです。
これを契機として入れ替えるという動きが始まるのですが、とにかく扱ったことがない。
ちょっと頭を悩ませ、とりあえず調べてみると、出てきました。
色々と。
ですが、どれもなんか色々書くのでちょっとややこしそう。
こういうのは心が折れそうになります。
でも、趣味でやるわけじゃなく仕事でやらなければいけないのでとりあえず一つずつ試してみました。
その一つが【jQuery UI】だったのです。
ボクのやったことは、６工程。
１．jQuery UIのファイルを読み込ませ、
２．jQuery UI用のCSSファイルを読み込ませ、
３．<tbody>にclass=”ui-sortable”とid=”sortdata”を追記、
４．<tr>のclassにui-sortable-handleを追記、
５．下のスクリプトを追記、
６．保存してファイルをアップロード。
※追記したスクリプト
<script>
$(function(){
$(‘#sortdata’).sortable();
});
</script>
以上。
デモ画面を見ていただくとわかると思いますが、今回はあくまで<tr>、つまり行の入れ替えです。
<td>の入れ替えがやりたい場合はちょっとやり方が異なるかもしれないです。
こちらも求められているので、調査中ですが、tdの場合はtrと違ってグループでひとまとめになっているわけではないので色々と厄介なんでしょうね。
簡単ではなさそうなので、後回しにしてますｗ
というわけで、厄介そうなtrの入れ替えでしたが、jQuery UIのおかげでとても簡単に実現することができました。
でも、こんなのは数多くある機能のほんの一部にすぎません。
もっともっと便利でカッコイイ動きを実現できると思います。
ボクもこれからいろいろ使えるように勉強していくつもりですので、またいい機能が見つかったら紹介します！
ではまた！WEBおじさんでした！
気になることは絶対解決！