ドリリウム

趣味をとことん突き詰めるブログ。高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / BMW / 地方移住 / ルノー・ルーテシア

REDIPS.drag テーブルのセルをあっちへこっちへドラッグ&ドロップ

ドリリウムは移転しました。

約5秒後に自動的にリダイレクトします。

「REDIPS.drag」を使うと、テーブル内のセルを好きな場所へドラッグ&ドロップで移動することができます。正確には、テーブルのセルにあるdiv要素を移動しています。異なるテーブルを跨いでドラッグ&ドロップしたり、削除したり、セルをマージしたり、色々な機能が詰まっています。

 

GitHub - dbunic/REDIPS_drag: Drag and drop table content/rows with JavaScript

 

詳しい説明やサンプルはたくさん転がっているのですが、意外なことにドラッグ&ドロップできないセルを明示的に指定する方法が見つかりませんでした。いや、あるかもしれない。

 

ただ、簡単に実装することができましたのでメモ。

rd.event.droppedBefore = function (obj) {
var pos = rd.getPosition();
if (pos[1] === 0 || pos[2] === 0) { return false; }
}

 

rdはREDIPS.dragのインスタンス。

droppedBeforeイベントで、ドロップしようとした先の情報をgetPositionメソッドで取得します。pos[0]にはテーブル、pos[1]には行インデックス、pos[2]には列インデックスが格納されています。

 

列インデックスか行インデックスが0、つまり1行目と1列目へドロップしようとするとfalseを返しています。droppedBeforeイベントでfalseを返すことで、ドラッグ&ドロップによる移動をキャンセルすることができます。

 

ブログを書いている人

カタミチ

ご意見・お問い合わせ等:syufukc@gmail.com

プライバシーポリシーおよび広告掲載等に関する表示事項