「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を返すことで、ドラッグ＆ドロップによる移動をキャンセルすることができます。
