ドラッグ＆ドロップで行移動・コピー・削除！JavaScript テーブル編集

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

mamdragdrop.jsを使うとドラッグ＆ドロップ機能を使いたいテーブル要素に class="mam_dragdrop"を設定するだけで使用できます。
<table class="mam_dragdrop">
mamdragdrop.js(5KB)ダウンロード
mamdragdrop.jsの３行目と４行目の値を変える(true又はfalse)と Ctrl+Dropで行コピー、Alt+Clickで行削除できる・できないの設定ができます。

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

■使い方

• 上記ボタンから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キーを押しながら各行の をクリックすると、行削除になります。
（全ての行を削除することは出来ません。最後の１行だけ消せません。）