2014年4月15日

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

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


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



 ですが、自分の実行環境では、「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/

0 件のコメント:

コメントを投稿