トップへ(mam-mam.net/)

コピペで使えるドラッグ&ドロップで行の移動ができるテーブル ~ mamdragdrop.js

コピペで使えるドラッグ&ドロップで行の移動ができるテーブル

mamdragdrop.jsを使うと<table class="mam_dragdrop">で行のドラッグ&ドロップが出来ます。
mamdragdrop.jsの3行目と4行目の値を変えると Ctrl+Dropで行コピー、Alt+Clickで行削除できる・できないの設定をすることができます。

//設定
this.canCtrlDropCopy=true;   //Ctrl+Dropで行コピーするか
this.canAltClickDelete=true; //Alt+Clickで行削除するか

■mamdragdrop.jsのダウンロード

mamdragdrop.js(5KB)ダウンロード

■使い方

■使用例

テーブルの各行の をドラッグ&ドロップして、行を移動させることが出来ます。
CTLRLキーを押しながら行をドラッグ&ドロップするとコピーになります。
ALTキーを押しながら各行の をクリックすると、行削除になります。
(全ての行を削除することは出来ません。最後の1行だけ消せません。)

列タイトル1 列タイトル2
セル1-1 セル1-2
セル2-1 セル2-2
セル3-1 セル3-2
セル4-1 セル4-2