Edit Tables with Drag & Drop: Move, Copy, and Delete Rows in JavaScript

A Copy‑and‑Paste Drag & Drop Table for Moving Rows

With mamdragdrop.js, all you need to do is add class="mam_dragdrop" to the table element where you want to enable drag‑and‑drop functionality.
<table class="mam_dragdrop">
Download mamdragdrop.js (5KB)
At the top of mamdragdrop.js, you can configure this.canCtrlDropCopy and this.canAltClickDelete (true or false) to enable or disable row copying with Ctrl+Drop and row deletion with Alt+Click.

// Settings
this.canCtrlDropCopy = true;   // Enable row copy with Ctrl + Drop
this.canAltClickDelete = true; // Enable row delete with Alt + Click

■How to Use

• Download mamdragdrop.js using the button above.
  
  
• In the file where you want to use mamdragdrop, include the script like this:
  

    <script src="./js/mamdragdrop.js"></script>
  

  Use either a relative or absolute path to specify the JavaScript file.
• Add class="mam_dragdrop" to the table element where you want to enable drag & drop.
  To correctly detect non-draggable header rows, make sure to include both <thead> and <tbody> tags.

  <table class="mam_dragdrop">
    <thead>
      <tr>
        <th>Column Title1</th>
        <th>Column Title2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell1-1</td>
        <td>Cell1-2<input type="text" style="width:128px;" maxlength="8" value="draggable table" name="tx[]"></td>
      </tr>
      <tr>
        <td>Cell2-1</td>
        <td>Cell2-2<input type="text" style="width:128px;" maxlength="8" value="text" name="tx[]"></td>
      </tr>
      <tr>
        <td>Cell3-1</td>
        <td>Cell3-2<input type="text" style="width:128px;" maxlength="8" value="text3-2" name="tx[]"></td>
      </tr>
      <tr>
        <td>Cell4-1</td>
        <td>Cell4-2<input type="text" style="width:128px;" maxlength="8" value="text4" name="tx[]"></td>
      </tr>
    </tbody>
  </table>
  

■Usage Example

You can drag and drop the icon on each row to move rows within the table.
Holding the CTRL key while dragging will copy the row instead of moving it.
Holding the ALT key and clicking the icon will delete the row.
(You cannot delete all rows. The last remaining row cannot be removed.)