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

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

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

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

■mamdragdrop.jsのダウンロード

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

■使い方

上記ボタンからmamdragdrop.jsをダウンロードします。
mam accordionを使いたいファイルで、
```
  <script src="./js/mamdragdrop.js"></script>
```
のように、相対又は絶対パスでjsファイルを指定します。

class="mam_dragdrop"を指定したtableエレメントを設定します。
thred、tbodyタグも入れてください。

<table class="mam_dragdrop">
  <thead>
    <tr>
      <th>列タイトル１</th>
      <th>列タイトル２</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル１－１</td>
      <td>セル１－２<input type="text" style="width:128px;" maxlength="8" value="テキスト1-2" name="tx[]"></td>
    </tr>
    <tr>
      <td>セル２－１</td>
      <td>セル２－２<input type="text" style="width:128px;" maxlength="8" value="テキスト2-2" name="tx[]"></td>
    </tr>
    <tr>
      <td>セル３－１</td>
      <td>セル３－２<input type="text" style="width:128px;" maxlength="8" value="テキスト3-2" name="tx[]"></td>
    </tr>
    <tr>
      <td>セル４－１</td>
      <td>セル４－２<input type="text" style="width:128px;" maxlength="8" value="テキスト4-2" name="tx[]"></td>
    </tr>
  </tbody>
</table>

■使用例

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

列タイトル１	列タイトル２
セル１－１	セル１－２
セル２－１	セル２－２
セル３－１	セル３－２
セル４－１	セル４－２