Setup the library is easy and straightforward. My existing page has a repeater that show data in html table rows so i split it into several tables each contain one row and surround the tables with <li> tag, Replace <table> tag in header and footer template with <ul>, that's it...
Now items is sortable by Drag and Drop but there is a little issue, click a button or Hyperlink inside the table will not work anymore.
After a little investigation I've figured out the reason, the JavaScript click() event is consist of 2 other events handled by the library:
- mousedown() used to start drag the item.
- mouseup() used to drop the dragged item.
So the solution is to prevent the mousedown() event from start dragging the list item when the child element (hyperlink) clicked. Simply from the javascript event source element we will check the node name raised the event ("A" for hyperlink and linkbutton or "input" for buttons, textbox, checkbox...)
Change the line:
{ if (K.button == 2) return }
To:
{ var ev = arguments[0] || window.event; if(K.button == 2 || ev.srcElement.nodeName == 'A') return }
