1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
5 <title>Table Drag and Drop jQuery plugin</title>
6 <link rel="stylesheet" href="tablednd.css" type="text/css"/>
7 <link rel="stylesheet" href="//google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css"/>
11 <h1>Table Drag and Drop jQuery plugin</h1>
12 <p>This page contains documentation and tests for the TableDnD jQuery plug-in. For more information and
13 to post comments, please go to <a href="http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/">isocra.com</a>.
15 <p>If you have issues or bug reports, then you can post them at the <a href="http://plugins.jquery.com/project/issues/TableDnD">TableDnD plug page</a>
16 at plugins.jquery.com</p>
18 <h2>How do I use it?</h2>
20 <li>Since TableDnD is a jquery pligin you will need to include jquery in your page first.
21 <p>No need for any downloads simply reference <a href="https://developers.google.com/speed/libraries/devguide#jquery">jQuery from the Google CDN</a> (Content Distribution Network) At the time of this writing the latest release was 1.8.2.
22 All scripts are included at the bottom of the page, to facilitate quicker rendering of the HTML for more responsive pages.
23 The following is the way we are linking to jQuery in the examples and this method can be recommended for use in your implementations too.</p>
24 <pre class="prettyprint"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></pre></li>
25 <li>We will also need a copy of the <a href="/articles/jquery.tablednd.js.zip">TableDnD plugin</a> (current version 0.9) which you can reference in the normal fashion, anywhere after jQuery.</li>
26 <li>In true jQuery style, the typical way to initialise the tabes is in the <code class="prettyprint">$(document).ready</code> code black function. Use a selector to select your table and then call <code class="prettyprint">tableDnD()</code>. You can optionally specify a set of properties (described below).</li>
29 <h2>A basic table</h2>
30 <div class="tableDemo">
31 <div id="debug" style="float:right;"></div>
32 <table id="table-1" cellspacing="0" cellpadding="2">
33 <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
34 <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
35 <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
36 <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
37 <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
38 <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
41 <p>The HTML for the table is very straight forward (no Javascript, pure HTML):</p>
43 <pre class="prettyprint">
44 <table id="table-1" cellspacing="0" cellpadding="2">
45 <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
46 <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
47 <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
48 <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
49 <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
50 <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
53 <p>To add in the "draggability" all we need to do is add a line to the <code class="prettyprint">$(document).ready(...)</code> function
55 <pre class="prettyprint">
56 <span class="comment"><script type="text/javascript"></span>
57 $(document).ready(function() {
58 <span class="comment">// Initialise the table</span>
59 $("#table-1").tableDnD();
61 <span class="comment"></script></span>
63 <p>In the example above we're not setting any parameters at all so we get the default settings. There are a number
64 of parameters you can set in order to control the look and feel of the table and also to add custom behaviour
65 on drag or on drop. The parameters are specified as a map in the usual way and are described below:</p>
70 <dd>This is the style that is assigned to the row during drag. There are limitations to the styles that can be
71 associated with a row (such as you can't assign a border—well you can, but it won't be
72 displayed). (So instead consider using <code class="prettyprint">onDragClass</code>.) The CSS style to apply is specified as
73 a map (as used in the jQuery <code class="prettyprint">css(...)</code> function).</dd>
75 <dd>This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
76 to what you can do. Also this replaces the original style, so again consider using onDragClass which
77 is simply added and then removed on drop.</dd>
79 <dd>This class is added for the duration of the drag and then removed when the row is dropped. It is more
80 flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
81 is class is <code class="prettyprint">tDnD_whileDrag</code>. So to use the default, simply customise this CSS class in your
84 <dd>Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
85 and the row that was dropped. You can work out the new order of the rows by using
86 <code class="prettyprint">table.tBodies[0].rows</code>.</dd>
88 <dd>Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
89 table and the row which the user has started to drag.</dd>
91 <dd>This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
92 window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
96 <h2>OnDrag custom table</h2>
97 <p>This second table has has an onDrop function applied as well as an onDragClass. The javascript to set this up is
100 <pre class="prettyprint">
101 $(document).ready(function() {
103 // Initialise the first table (as before)
104 $("#table-1").tableDnD();
106 // Make a nice striped effect on the table
107 $("#table-2 tr:even').addClass('alt')");
109 // Initialise the second table specifying a dragClass and an onDrop function that will display an alert
110 $("#table-2").tableDnD({
111 onDragClass: "myDragClass",
112 onDrop: function(table, row) {
113 var rows = table.tBodies[0].rows;
114 var debugStr = "Row dropped was "+row.id+". New order: ";
115 for (var i=0; i<rows.length; i++) {
116 debugStr += rows[i].id+" ";
118 $(table).parent().find('.result').text(debugStr);
120 onDragStart: function(table, row) {
121 $(table).parent().find('.result').text("Started dragging row "+row.id);
126 <div class="tableDemo">
127 <table id="table-2" cellspacing="0" cellpadding="0">
128 <tr id="2.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td><td><input type="radio" name="rone" value="V" />V</td><td><input type="radio" name="rone" value="C" checked="checked" />C</td><td><input type="radio" name="rone" value="N" />N</td></tr>
129 <tr id="2.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td><td><input type="radio" name="rtwo" value="V" />V</td><td><input type="radio" name="rtwo" value="C" checked="checked" />C</td><td><input type="radio" name="rtwo" value="N" />N</td></tr>
130 <tr id="2.3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td><td><input type="radio" name="rthree" value="V" />V</td><td><input type="radio" name="rthree" value="C" checked="checked" />C</td><td><input type="radio" name="rthree" value="N" />N</td></tr>
131 <tr id="2.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td><td><input type="radio" name="rfour" value="V" />V</td><td><input type="radio" name="rfour" value="C" checked="checked" />C</td><td><input type="radio" name="rfour" value="N" />N</td></tr>
132 <tr id="2.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td><td><input type="radio" name="rfive" value="V" />V</td><td><input type="radio" name="rfive" value="C" checked="checked" />C</td><td><input type="radio" name="rfive" value="N" />N</td></tr>
133 <tr id="2.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td><td><input type="radio" name="rsix" value="V" />V</td><td><input type="radio" name="rsix" value="C" checked="checked" />C</td><td><input type="radio" name="rsix" value="N" />N</td></tr>
134 <tr id="2.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="7"/></td><td><input type="radio" name="rseven" value="V" />V</td><td><input type="radio" name="rseven" value="C" checked="checked" />C</td><td><input type="radio" name="rseven" value="N" />N</td></tr>
135 <tr id="2.8"><td>8</td><td>Eight</td><td><input type="text" name="eight" value="8"/></td><td><input type="radio" name="reight" value="V" />V</td><td><input type="radio" name="reight" value="C" checked="checked" />C</td><td><input type="radio" name="reight" value="N" />N</td></tr>
136 <tr id="2.9"><td>9</td><td>Nine</td><td><input type="text" name="nine" value="9"/></td><td><input type="radio" name="rnine" value="V" />V</td><td><input type="radio" name="rnine" value="C" checked="checked" />C</td><td><input type="radio" name="rnine" value="N" />N</td></tr>
137 <tr id="2.10"><td>10</td><td>Ten</td><td><input type="text" name="ten" value="10"/></td><td><input type="radio" name="rten" value="V" />V</td><td><input type="radio" name="rten" value="C" checked="checked" />C</td><td><input type="radio" name="rten" value="N" />N</td></tr>
138 <tr id="2.11"><td>11</td><td>Eleven</td><td><input type="text" name="eleven" value="11"/></td><td><input type="radio" name="releven" value="V" />V</td><td><input type="radio" name="releven" value="C" checked="checked" />C</td><td><input type="radio" name="releven" value="N" />N</td></tr>
139 <tr id="2.12"><td>12</td><td>Twelve</td><td><input type="text" name="twelve" value="12"/></td><td><input type="radio" name="rtwelve" value="V" />V</td><td><input type="radio" name="rtwelve" value="C" checked="checked" />C</td><td><input type="radio" name="rtwelve" value="N" />N</td></tr>
140 <tr id="2.13"><td>13</td><td>Thirteen</td><td><input type="text" name="thirteen" value="13"/></td><td><input type="radio" name="rthirteen" value="V" />V</td><td><input type="radio" name="rthirteen" value="C" checked="checked" />C</td><td><input type="radio" name="rthirteen" value="N" />N</td></tr>
141 <tr id="2.14"><td>14</td><td>Fourteen</td><td><input type="text" name="fourteen" value="14"/></td><td><input type="radio" name="rfourteen" value="V" />V</td><td><input type="radio" name="cfourteen" value="C" checked="checked" />C</td><td><input type="radio" name="rfourteen" value="N" />N</td></tr>
143 <div class="result"> </div>
145 <h2>Communicating with the back-end</h2>
146 <p>Generally once the user has dropped a row, you need to inform the server of the new order. To do this, we've
147 added a method called <code class="prettyprint">serialize()</code>. It takes no parameters but knows the current table from the
148 context. The method returns a string of the form <code class="prettyprint"><i>tableId</i>[]=<i>rowId1</i>&<i>tableId</i>[]=<i>rowId2</i>&<i>tableId</i>[]=<i>rowId3</i>...</code>
149 You can then use this as part of an Ajax load.
152 Since version 0.9, instead of manually creating the serialized data string we instead use <a href="http://api.jquery.com/jQuery.param/">jQuery's param method</a> which has the added benefit of url encoding the data string as well.
154 <p>This third table demonstrates calling the serialize function inside onDrop (as shown below). It also
155 demonstrates the "nodrop" class on row 3 and "nodrag" class on row 5, so you can't pick up row 5 and
156 you can't drop any row on row 3 (but you can drag it).</p>
157 <pre class="prettyprint">
158 $('#table-3').tableDnD({
159 onDrop: function(table, row) {
160 alert($.tableDnD.serialize());
164 <div class="tableDemo">
165 <div id="AjaxResult" style="float: right; width: 250px; border: 1px solid silver; padding: 4px; font-size: 90%">
167 <p>Drag and drop in this table to test out serialise and using JQuery.load()</p>
169 <table id="table-3" cellspacing="0" cellpadding="2">
170 <tr id="3.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
171 <tr id="3.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
172 <tr id="3.3" class="nodrop"><td>3</td><td>Three (Can't drop on this row)</td><td><input type="text" name="three" value="three"/></td></tr>
173 <tr id="3.4" class="nodrop"><td>4</td><td>Four (Can't drop on this row)</td><td><input type="text" name="four" value="four"/></td></tr>
174 <tr id="3.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
175 <tr id="3.6" class="nodrag"><td>6</td><td>Six (Can't drag this row)</td><td><input type="text" name="six" value="six"/></td></tr>
176 <tr id="3.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
178 <div class="result"></div>
180 <h2>Multiple tbody table</h2>
181 <p>This table has multiple TBODYs. The functionality isn't quite working properly. You can only drag the rows inside their
182 own TBODY, you can't drag them outside it. Now this might or might not be what you want, but unfortunately if you then drop a row outside its TBODY you get a Javascript error because inserting after a sibling doesn't work. This will be fixed in the next version. The header rows all have the classes "nodrop" and "nodrag" so that they can't be dragged or dropped on.</p>
183 <div class="tableDemo">
184 <table id="table-4" cellspacing="0" cellpadding="2">
186 <tr id="4.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
189 <tr id="4.1"><td>4.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
190 <tr id="4.2"><td>4.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
191 <tr id="4.3"><td>4.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
192 <tr id="4.4"><td>4.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
193 <tr id="4.5"><td>4.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
194 <tr id="4.6"><td>4.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
197 <tr id="5.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
198 <tr id="5.1"><td>5.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
199 <tr id="5.2"><td>5.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
200 <tr id="5.3"><td>5.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
201 <tr id="5.4"><td>5.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
202 <tr id="5.5"><td>5.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
203 <tr id="5.6"><td>5.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
206 <tr id="6.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
207 <tr id="6.1"><td>6.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
208 <tr id="6.2"><td>6.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
209 <tr id="6.3"><td>6.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
210 <tr id="6.4"><td>6.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
211 <tr id="6.5"><td>6.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
212 <tr id="6.6"><td>6.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
216 <h2>Identify rows</h2>
218 The following table demonstrates the use of the default regular expression. The rows have IDs of the
219 form table5-row-1, table5-row-2, etc., but the regular expression is <code class="prettyprint">/[^\-]*$/</code> (this is the same
220 as used in the <a href="http://plugins.jquery.com/project/NestedSortable">NestedSortable</a> plugin for consistency).
221 This removes everything before and including the last hyphen, so the serialised string just has 1, 2, 3 etc.
222 You can replace the regular expression by setting the <code class="prettyprint">serializeRegexp</code> option, you can also just set it
223 to null to stop this behaviour.
225 <pre class="prettyprint">
226 $('#table-5').tableDnD({
227 onDrop: function(table, row) {
228 alert($.tableDnD.serialize());
230 dragHandle: ".dragHandle"
233 <div class="tableDemo">
234 <table id="table-5" cellspacing="0" cellpadding="2">
235 <tr id="table5-row-1"><td class="dragHandle"> </td><td>1</td><td>One</td><td>some text</td></tr>
236 <tr id="table5-row-2"><td class="dragHandle"> </td><td>2</td><td>Two</td><td>some text</td></tr>
237 <tr id="table5-row-3"><td class="dragHandle"> </td><td>3</td><td>Three</td><td>some text</td></tr>
238 <tr id="table5-row-4"><td class="dragHandle"> </td><td>4</td><td>Four</td><td>some text</td></tr>
239 <tr id="table5-row-5"><td class="dragHandle"> </td><td>5</td><td>Five</td><td>some text</td></tr>
240 <tr id="table5-row-6"><td class="dragHandle"> </td><td>6</td><td>Six</td><td>some text</td></tr>
242 <div class="result"></div>
244 <p>In fact you will notice that I have also set the dragHandle on this table. This has two effects: firstly only
245 the cell with the drag handle class is draggable and secondly it doesn't automatically add the <code class="prettyprint">cursor: move</code>
246 style to the row (or the drag handle cell), so you are responsible for setting up the style as you see fit.</p>
247 <p>Here I've actually added an extra effect which adds a background image to the first cell in the row whenever
248 you enter it using the jQuery <code class="prettyprint">hover</code> function as follows:</p>
249 <pre class="prettyprint">
250 $("#table-5 tr").hover(function() {
251 $(this.cells[0]).addClass('showDragHandle');
253 $(this.cells[0]).removeClass('showDragHandle');
256 <p>This provides a better visualisation of what you can do to the row and where you need to go to drag it (I hope).</p>
258 <h2>Meta table (auto configure)</h2>
260 <script type="text/javascript">
261 function inline_sprintlist_ondrop(table, row) {
262 var result = $(table).parent().find('.result'),
263 pre = $('<pre class="prettyprint">');
265 result.html(pre.text($.tableDnD.jsonize(true)));
267 // pre.text($(table).tableDnD.jsonize())
269 //// '<div class="indent"> </div>',
272 <div class="tableDemo">
281 data-ondragstyle="display: block; z-index: 5; background-color: #7777cc;"
285 <tr id="6-1"><td>Basic example with extra fancy</td></tr>
286 <tr id="6-2"><td>row styles bot this trick really</td></tr>
287 <tr id="6-3"><td>only works with single column</td></tr>
288 <tr id="6-4"><td>because it looses the corumn</td></tr>
289 <tr id="6-5"><td>width when displaying a table</td></tr>
290 <tr id="6-6"><td>in block style unfortunately</td></tr>
294 id="sprintlist_table"
295 cellspacing="0" cellpadding="10"
297 data-ondragstart="$(table).parent().find('.result').text('data-ondragstart');"
298 data-ondrop="inline_sprintlist_ondrop(table, row);"
299 data-serializeregexp="^.*sprints$|[^\_]*$"
300 data-ondragclass="sprintlist-drag"
303 data-scrollamount="100"
305 data-hierarchylevel="2"
306 data-indentartifact=" "
307 data-autowidthadjust="1"
308 data-autocleanrelations="1"
309 data-jsonpretifyseparator=" "
310 data-serializeparamname="sprintlist"
314 <thead id="sprintlist_header">
315 <tr><th class="name">Name</th><th class="start_date">Start Date</th><th class="end_date">End Date</th><th class="actions">Actions</th></tr>
318 <tr id="present_sprints" class="group_heading nodrag"><td colspan="4">Present Sprints</td></tr>
319 <tr id="sprint_145664"><td>First round - in sprint</td><td>2012-09-19</td><td>2012-09-27</td>
320 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
321 <tr id="future_sprints" class="group_heading nodrag"><td colspan="4">Future Sprints</td></tr>
322 <tr id="sprint_145665" class="toggler_row"><td>Second round</td><td>2012-09-28</td><td>2012-10-04</td>
323 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
324 <tr id="sprint_145975" class="toggler_row"><td>Third round</td><td>2012-10-04</td><td>2012-10-11</td>
325 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
326 <tr id="sprint_145965" class="toggler_row"><td>Fourth round</td><td>2012-10-13</td><td>2012-10-20</td>
327 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
328 <tr id="sprint_145966" class="toggler_row"><td>Release prep</td><td>2012-10-20</td><td>2012-10-27</td>
329 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
330 <tr id="sprint_145964" class="toggler_row"><td>Fifth run</td><td>2012-10-27</td><td>2012-11-03</td>
331 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
332 <tr id="sprint_145974" class="toggler_row"><td>Sixth run</td><td>2012-11-03</td><td>2012-11-10</td>
333 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
334 <tr id="sprint_145985" class="toggler_row"><td>Seventh run</td><td>2012-11-10</td><td>2012-11-17</td>
335 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
336 <tr id="sprint_145976" class="toggler_row"><td>Release 2 prep</td><td>2012-11-17</td><td>2012-11-24</td>
337 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
338 <tr id="past_sprints" class="group_heading nodrag"><td colspan="4">Past Sprints</td></tr>
339 <tr id="sprint_145996" class="toggler_row"><td>Backlog creation - complete</td><td>2012-09-01</td><td>2012-09-08</td>
340 <td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
341 <tr id="no_sprints" class="group_heading nodrag"><td colspan="4">No Sprints</td></tr>
344 <a class="toggle-json6" href="#">Hide JSON</a><div id="json6" class="result"></div>
347 <h2>Hierarchy table</h2>
348 <p>This table allows row order to be dragged horizontally and placed in a hierarchy under a parent row (since version 0.9). We also get a chance to look at the new jsonize method for JSON serialized form of the data. </p>
349 <p>In the onDrop event handler we pass the JSON as data to jquery through a HTTP POST ajax call to the server:</p>
350 <pre class="prettyprint">
351 $.post("server/ajaxJSONTest.php", $.tableDnD.jsonize(), function (data) {
352 $('#table-7-response').html('<br>'+ data);
355 <p>On the back-end we have a PHP example that simply retrieves the JSON POST data from the built in stream php://input, decodes the payload and proceeds to build the hierarchy through recursion.</p>
356 <p>To keep the data simple and also stay compatible with the http variable methods as mentioned previously the data structure is formed with separate collections. If a parent has children the children first level are listed and if any of the children have subsequent children an additional collection is created for the first level of these.</p>
357 <p>The following hierarchy for example would generate 3 collections:</p>
361 <li>7.02<ul><li>7.03</li></ul></li>
365 <p>In JSON the dataset looks like this:</p>
366 <a class="toggle-json7" href="#">Hide JSON</a><pre id="json7" class="prettyprint">
381 <p>We use the setting hierarchyLevel to indicate how many levels are supported, the example uses 4 levels deep. When populating the table you can use the the data-leve tag to indicate at which level the current row is represented at.</p>
383 <div class="hierarchyDemo">
384 <div style="float: right; width: 450px; border: 1px solid silver; padding: 4px; font-size: 90%">
385 <div id="table-7-response" style="float: right; margin-left: 20px">
387 <p>Drag and drop in this table to test out hierarcies and using JSON payload.</p>
391 <table id="table-7" cellspacing="0" cellpadding="2">
392 <tr id="7.00"> <td>7.0 One</td><td><input type="text" name="one" value="one"/></td></tr>
393 <tr id="7.01" data-level="1"><td>7.1 Two</td><td><input type="text" name="two" value="two"/></td></tr>
394 <tr id="7.02" data-level="1"><td>7.2 Three</td><td><input type="text" name="three" value="three"/></td></tr>
395 <tr id="7.03" data-level="2"><td>7.3 Four</td><td><input type="text" name="four" value="four"/></td></tr>
396 <tr id="7.04"> <td>7.4 Five</td><td><input type="text" name="five" value="five"/></td></tr>
397 <tr id="7.05" data-level="1"><td>7.5 Six</td><td><input type="text" name="six" value="six"/></td></tr>
398 <tr id="7.06" data-level="2"><td>7.6 Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
399 <tr id="7.07" data-level="3"><td>7.7 Eight</td><td><input type="text" name="eight" value="eight"/></td></tr>
400 <tr id="7.08" data-level="4"><td>7.8 Nine</td><td><input type="text" name="nine" value="nine"/></td></tr>
401 <tr id="7.09" data-level="2"><td>7.9 Ten</td><td><input type="text" name="ten" value="ten"/></td></tr>
402 <tr id="7.10" data-level="2"><td>7.0 One</td><td><input type="text" name="one" value="one"/></td></tr>
403 <tr id="7.11"> <td>7.1 Two</td><td><input type="text" name="two" value="two"/></td></tr>
404 <tr id="7.12"> <td>7.2 Three</td><td><input type="text" name="three" value="three"/></td></tr>
405 <tr id="7.13"> <td>7.3 Four</td><td><input type="text" name="four" value="four"/></td></tr>
406 <tr id="7.14"> <td>7.4 Five</td><td><input type="text" name="five" value="five"/></td></tr>
407 <tr id="7.15" data-level="1"><td>7.5 Six</td><td><input type="text" name="six" value="six"/></td></tr>
408 <tr id="7.16" data-level="2"><td>7.6 Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
409 <tr id="7.17" data-level="1"><td>7.7 Eight</td><td><input type="text" name="eight" value="eight"/></td></tr>
410 <tr id="7.18" data-level="2"><td>7.8 Nine</td><td><input type="text" name="nine" value="nine"/></td></tr>
411 <tr id="7.19"> <td>7.9 Ten</td><td><input type="text" name="ten" value="ten"/></td></tr>
413 <a class="toggle-json77" href="#">Hide JSON</a><div id="json77" class="result"></div>
416 <h2>Version History</h2>
417 <table class="versionHistory">
418 <tr><td>0.2</td><td style="white-space: nowrap;">2008-02-20</td><td>First public release</td></tr>
419 <tr><td>0.3</td><td>2008-02-27</td><td>Added onDragStart option<br/>Made the scroll amount configurable (default is 5 as before)</td></tr>
420 <tr><td>0.4</td><td>2008-03-28</td><td>Fixed the scrollAmount so that if you set this to zero then it switches off this functionality<br/>Fixed the auto-scrolling in IE6 thanks to Phil<br/>Changed the NoDrop attribute to the class "nodrop" (so any row with this class won't allow dropping)<br/>Changed the NoDrag attribute to the class "nodrag" (so any row with this class can't be dragged)<br/>Added support for multiple TBODYs--though it's still not perfect<br/>Added onAllowDrop to allow the developer to customise this behaviour<br/>Added a serialize() method to return the order of the rows in a form suitable for POSTing back to the server</td></tr>
421 <tr><td>0.5</td><td>2008-06-04</td><td>Changed so that if you specify a dragHandle class it doesn't make the whole row<br/>draggable<br/>Improved the serialize method to use a default (and settable) regular expression.<br/>Added tableDnDupate() and tableDnDSerialize() to be called when you are outside the table</td></tr>
422 <tr><td>0.6</td><td>2011-12-02</td><td>Support for touch devices</td></tr>
423 <tr><td>0.7</td><td>2012-04-09</td><td>DenisH - Code cleanup, </td></tr>
424 <tr><td>0.8</td><td>2012-09-13</td><td>Minified version of 0.8dev release - LightDot</td></tr>
425 <tr><td>0.9</td><td>2012-10-21</td><td>Changelog from different contributors:
426 <table style="width: 700px; margin-top: 10px; font-size: 90%;" cellpadding="0" cellspacing="0">
427 <tr><td style="white-space: nowrap;">2012-01-24</td><td>Daniel Bøndergaard</td><td>Don't include blank ids in serialization</td></tr>
428 <tr><td>2012-05-08</td><td>Matt Snider</td><td style="white-space: nowrap;">Major refactor and optimization, dispersed codebase merge, , Hierarchy DnD</td></tr>
429 <tr><td>2012-06-04</td><td>Vyacheslav Salakhutdinov</td><td>Remove alert with "has Touch"</td></tr>
430 <tr><td>2012-06-11</td><td>AndreZteel</td><td>Major refactor and optimization, dispersed codebase merge, , Hierarchy DnD</td></tr>
431 <tr><td>2012-06-11</td><td>Daniel Franz</td><td>Global footprint reduction by limiting variable scope</td></tr>
432 <tr><td>2012-06-07</td><td>Andrew Nagy</td><td>Added jsonize for JSON Serialization.</td></tr>
433 <tr><td>2012-07-12</td><td>Adam Hodges</td><td>Multiple <tbody> issues fixed</td></tr>
434 <tr><td>2012-09-16</td><td>nickl-</td><td>Major refactor and optimization including code reduction, code cleanup and normalization, dispersed codebase merge, Hierarchy DnD, jQuery object modifiers, improved scope reduction, style enhancements, improved event handling and state awareness, motion sensitivity thresholds and direction detection, relation integrity, refactored data serialization, </td></tr>
435 <tr><td>2012-10-21</td><td>nickl-</td><td>JQuery via CDN, documentation updates, Added code pretifier and other style adjustments</td></tr>
436 <tr><td>2012-03-23</td><td>nickl-</td><td>Added auto init support and ability to configure DnD via data attributes, improved data integrity and common points of failure, optimization and style clean-up. Added license and attribution.</td></tr>
442 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
443 <script type="text/javascript" src="//google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
444 <script type="text/javascript" src="js/jquery.tablednd.js"></script>
445 <script type="text/javascript">
446 $(document).ready(function() {
448 // Initialise the first table (as before)
449 $("#table-1").tableDnD();
450 // Make a nice striped effect on the table
451 table_2 = $("#table-2");
452 table_2.find("tr:even").addClass("alt");
453 // Initialise the second table specifying a dragClass and an onDrop function that will display an alert
455 onDragClass: "myDragClass",
456 onDrop: function(table, row) {
457 var rows = table.tBodies[0].rows;
458 var debugStr = "Row dropped was "+row.id+". New order: ";
459 for (var i=0; i<rows.length; i++) {
460 debugStr += rows[i].id+" ";
462 $(table).parent().find('.result').text(debugStr);
464 onDragStart: function(table, row) {
465 $(table).parent().find('.result').text("Started dragging row "+row.id);
469 $('#table-3').tableDnD({
470 onDragStart: function(table, row) {
471 $(table).parent().find('.result').text('');
473 onDrop: function(table, row) {
474 $('#AjaxResult').load("server/ajaxTest.php?"+$.tableDnD.serialize())
475 .parent().find('.result').html($('<p>').append('Result of $.tableDnD.serialize() is url encoded: ')
476 .append($('<pre class="prettyprint">').text($.tableDnD.serialize()))
477 .append(' Which looks like this when decoded (decodeURI): ')
478 .append($('<pre class="prettyprint">').text(decodeURI($.tableDnD.serialize()))));
483 $('#table-4').tableDnD(); // no options currently
485 $('#table-5').tableDnD({
486 onDragStart: function(table, row) {
487 $(table).parent().find('.result').text('');
489 onDrop: function(table, row) {
490 var data = $(table).tableDnDSerialize();
491 $(table).parent().find('.result').append(
492 $('<strong>').text('The urlencoded serialized string:'))
493 .append($('<pre class="prettyprint">').text(data))
494 .append($('<strong>').text('Which looks like this through decodeURIComponent:'))
495 .append($('<pre class="prettyprint">').text(decodeURIComponent(data)));
498 dragHandle: ".dragHandle"
501 $("#table-5 ").find("tr").hover(function() {
502 $(this.cells[0]).addClass('showDragHandle');
504 $(this.cells[0]).removeClass('showDragHandle');
507 $('#table-7').tableDnD({
509 onDragStart: function(table, row) {
510 $(table).parent().find('.result').text('');
512 onDrop: function(table, row) {
513 $(table).parent().find('.result').append(
514 $('<strong>').text('JSON.stringify result of $.tableDnD.tableData()'))
515 .append($('<pre class="prettyprint">').text($.tableDnD.jsonize(true)));
517 $.post("server/ajaxJSONTest.php", $.tableDnD.jsonize(), function (data) {
518 $('#table-7-response').html('<br>'+ data);
523 $('.toggle-json6').toggle(function() {
524 $(this).text('Show JSON');
529 $(this).text('Hide JSON');
533 $('.toggle-json7').toggle(function() {
534 $(this).text('Show JSON');
539 $(this).text('Hide JSON');
544 $('#radio-button-test').tableDnD();