Comments on: Table drag’n'drop http://www.pockers.dk/2007/10/17/table-drag-n-drop/ Web Development, Mac, Ubuntu, Recipes Wed, 10 Mar 2010 19:37:12 +0000 http://wordpress.org/?v=2.3 By: taj http://www.pockers.dk/2007/10/17/table-drag-n-drop/#comment-2 taj Wed, 17 Oct 2007 11:35:52 +0000 http://www.pockers.dk/2007/10/17/table-drag-n-drop/#comment-2 <pre> <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous.js"></script> <script type="text/javascript"> function myVoid() { } </script> <style type="text/css"> .dragme { cursor: move; } </style> </head> <body> <div id="rows"> <table id="row_1" width="50%"> <tbody> <tr> <td width="9%">Jens</td> <td width="9%">Jensvej 1</td> <td width="9%">12345678</td> <td width="9%">87654321</td> <td width="9%">jens@jensen.bla</td> <td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a> </td> </tr> </tbody> </table> <table id="row_2" width="50%"> <tbody> <tr> <td width="9%">Niels</td> <td width="9%">Nielsvej 1</td> <td width="9%">98765432</td> <td width="9%">98765432</td> <td width="9%">niels@nielsen.bla</td> <td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a> </td> </tr> </tbody> </table> <table id="row_3" width="50%"> <tbody> <tr> <td width="9%">Anders</td> <td width="9%">Andersvej 1</td> <td width="9%">34567890</td> <td width="9%">99876543</td> <td width="9%">anders@andersen.bla</td> <td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a> </td> </tr> </tbody> </table> </div> <p id="displayorder"></p> <script type="text/javascript"> // <![CDATA[ Sortable.create("rows", { handle: 'dragme', tag: 'table', onUpdate: function showOrder() { $('displayorder').innerHTML = $('displayorder').innerHTML + ' >> ' + Sortable.sequence('rows'); } }); $('displayorder').innerHTML = 'Order: '+Sortable.sequence('rows'); // ]]> </script> </body> </html></pre> <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous.js"></script> <script type="text/javascript"> function myVoid() { } </script> <style type="text/css"> .dragme { cursor: move; } </style> </head> <body> <div id="rows"> <table id="row_1" width="50%"> <tbody> <tr> <td width="9%">Jens</td> <td width="9%">Jensvej 1</td> <td width="9%">12345678</td> <td width="9%">87654321</td> <td width="9%">jens@jensen.bla</td> <td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a> </td> </tr> </tbody> </table> <table id="row_2" width="50%"> <tbody> <tr> <td width="9%">Niels</td> <td width="9%">Nielsvej 1</td> <td width="9%">98765432</td> <td width="9%">98765432</td> <td width="9%">niels@nielsen.bla</td> <td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a> </td> </tr> </tbody> </table> <table id="row_3" width="50%"> <tbody> <tr> <td width="9%">Anders</td> <td width="9%">Andersvej 1</td> <td width="9%">34567890</td> <td width="9%">99876543</td> <td width="9%">anders@andersen.bla</td> <td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a> </td> </tr> </tbody> </table> </div> <p id="displayorder"></p> <script type="text/javascript"> // <![CDATA[ Sortable.create("rows", { handle: 'dragme', tag: 'table', onUpdate: function showOrder() { $('displayorder').innerHTML = $('displayorder').innerHTML + ' >> ' + Sortable.sequence('rows'); } }); $('displayorder').innerHTML = 'Order: '+Sortable.sequence('rows'); // ]]> </script> </body> </html> ]]>