ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

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

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

 

▼IT系の転職なら

▼誰かにプログラミングを教えてみませんか?

▼釣り具の宅配買取なら