tableタグ内でtrをマウスで移動させるのメモ

 webのシステムで行の移動は簡単ではないですが、マウスを使ってドラッグ＆ドロップで行移動をする為のJQueryのプラグインを見つけました。


 GitHubから持ってくるとバージョン0.4と古いので、サンプルを紹介しているページから直接持ってこないとよろしくないようです。
ここからダウンロード(version 0.7)できます。

Table Drag and Dropのサイト
http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

 ですが、自分の実行環境では、「jquery-2.1.0.min.js」を使っているからなのか、なんなのかサンプル通りにコーディングしてもエラーが起きたり、イベントが起きなかったりしてしまいます。
JQuery1.7に対応していると明記されています。
一部ソースを書き換えたり、サンプルとは違うコーディング方法をしています。

 359行目で、移動先の行が違う場合のみ、onDropイベントを発生させるロジックがあるのですが、このままだとイベントが起きないことがわかりました(原因は不明です。JQueryのバージョンの問題かもしれません。)。
以下のように変更しました。

変更前:if (config.onDrop && (jQuery.tableDnD.originalOrder != newOrder)) {
変更後:if (config.onDrop)) {

きっと、ドロップした先の行番号が違う場合のみthenの処理(onDropイベント発生)を行うのでしょう。

これで、とっても使いやすいシステムが構築できるよ。


ちなみに。
テーブルタグをいろいろできるプラグインを照会しているサイト
http://blog.verygoodtown.com/2011/05/jquery-table-plugins/