■mamdragdrop.jsのダウンロード
mamdragdrop.js(5KB)ダウンロード■使い方
-
上記ボタンからmamdragdrop.jsをダウンロードします。
-
mam accordionを使いたいファイルで、
<script src="./js/mamdragdrop.js"></script>
のように、相対又は絶対パスでjsファイルを指定します。
-
class="mam_dragdrop"を指定したtableエレメントを設定します。
<table class="mam_dragdrop"> <thead> <tr> <th>列タイトル1</th> <th>列タイトル2</th> </tr> </thead> <tbody> <tr> <td>セル1-1</td> <td>セル1-2<input type="text" style="width:128px;" maxlength="8" value="テキスト1-2" name="tx[]"></td> </tr> <tr> <td>セル2-1</td> <td>セル2-2<input type="text" style="width:128px;" maxlength="8" value="テキスト2-2" name="tx[]"></td> </tr> <tr> <td>セル3-1</td> <td>セル3-2<input type="text" style="width:128px;" maxlength="8" value="テキスト3-2" name="tx[]"></td> </tr> <tr> <td>セル4-1</td> <td>セル4-2<input type="text" style="width:128px;" maxlength="8" value="テキスト4-2" name="tx[]"></td> </tr> </tbody> </table>
■使用例
テーブルの各行の をドラッグ&ドロップして、行を移動させることが出来ます。CTLRLキーを押しながら行をドラッグ&ドロップするとコピーになります。
ALTキーを押しながら各行の をクリックすると、行削除になります。
(全ての行を削除することは出来ません。最後の1行だけ消せません。)
列タイトル1 | 列タイトル2 |
---|---|
セル1-1 | セル1-2 |
セル2-1 | セル2-2 |
セル3-1 | セル3-2 |
セル4-1 | セル4-2 |