Drag and drop - Arrange table rows

Demo

Overview

This script applies drag and drop features to HTML tables. It is a nice script to use if you want to enable your users to rearrange rows in a table, example: Articles in a Content Management System(CMS)

Licensing

This script is licensed under LGPL. Commercial licenses are also available

Download

• arrange-table-rows.zip

Demo

Rearrange the table below by dragging the rows( drag handle is in the first column)

Configuration

Step 1 - Create your HTML table

Create a standard HTML table and give it an id, example:

<table id="myTable">
<thead>
    <tr>
      <td>Id</td>
      <td>Title</td>
      <td>Publish date</td>
      <td>Withdraw date</td>
</tr>
</thead>
<tbody>
    <tr id="row1">
      <td>1</td>
      <td>Coldest winter since 1973</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row2">
      <td>2</td>
      <td>Christmas shopping starting early this year</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row3">
      <td>3</td>
      <td>Ten year old boy rescued a cat</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row4">
      <td>4</td>
      <td>Top goal scorer injured in yesterdays match</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row5">
      <td>5</td>
      <td>Local hero returns home</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row6">
      <td>6</td>
      <td>15 year old boy caught big shark</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row7">
      <td>7</td>
      <td>Big Test of compact cameras</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
</tbody>
</table>

Please notice that the table has both a <thead> and a <tbody> tag. thead is used for the header which isn't dragable, and tbody for the dragable rows.

Each row has also been assigned to unique ids. These can be important when you want to save the changes made to the table

Step 2 - Create your Javascript object

Code example:

var arrangeObj = new DG.ArrangeTableRows({
   el: 'myTable',
   onDrag : {
     showCell : 1
   },
   listeners : {
     drop : moveArticle
   }
});

You create a new ArrangeTableRows object by calling "new DG.ArrangeTableRows". The constructor of the DG.ArrangeTableRows class accepts a config with these properties:

• el: Reference to the table you want to apply drag and drop feature to, in this example: "myTable" since that's the id of the table in the code above
• onDrag: (Optional argument). Used in case you don't want the entire row to be displayed while dragging. To show only content of a single cell, set onDrag.showCell to the index of the cell you want to display, example: 1 for the second cell(0 = first cell).
  onDrag: {
    showCell : 1
  }
  If you want to display contentof more than one cell, send in an array, example:
  onDrag: {
    showCell : [1,2}
  }
  In the demo above, onDrag.showCell is set to 1, i.e. only the cell with the title is displayed while dragging.
• listeners: Functions to call when events are triggered. Currently, only an event named "drop" is implemented. In the example code above, when a row has been moved, the function named "moveArticle" will be called. It will receive a config object as only argument. This object looks like this:
  {
    source : '<id of source>',,
    destination : '<id of destination>',,
    where : 'before|after',
    position : <position of dragged row(1=first row, 2 = second row ..)>,
  }
  source contains the id of the moved row, destination the id of the row where the node has been inserted next to. where indicates if it's been inserted before or after the destination node. position indicates it's new position in the table.
• clsFilter: (Optional) - If defined, only rows assigned to this css class will be dragable, example:
  clsFilter : 'dragableRow'

Save changes

You will usually want to save changes instantly in the moveArticle function(from the drop event), or manually from a button or link.

The DG.ArrangeTableRows class contains one public method which can be very useful when you want to save changes. It's called "getRows", and it returns an array of the id's of all rows in the table, example:

["row1", "row2", "row3", "row4", "row10", "row5", "row6", "row7", "row8", "row9"]

One way to save changes is to send this array to the server and update each row in your database by looping through this array. The demo file(se link at top) gives you some examples of Ajax requests(See source)

Public methods:

• getRows: - Returns array of current row order
• reset: - Resets table back to initial state
• saveState: - Sets new initial state

Comments

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com