We have been revamping Prowork. While doing some housekeep over the weekend, I noticed I wrote the [task] drag and sort feature on the current version from scratch. So as part of the housekeep, I converted it to a jQuery plugin - jquery.listSort.js
Why another drag and sort (drop, whatever) plugin?
Back then, I searched for existing plugins (not based on jQuery UI) for the purpose. I found some really good ones but most didn't work for the task list mainly becase the list element contains other collapsible elements (notes, members, dates, etc). Many also break when the list is sorted (by status or created/due dates as we have) or filtered (my task, a team member's task or all tasks). And there is always position issues as most plugins miss the fact that the dragged element may be contained in a parent with a relative position. So using an offset relative to the document (instead of the relative parent) as the absolute position for the clone will always fail. Another one - what happens when you are dragging an element to a position far below the window? Does the window scroll automatically or you are just left hanging there at the bottom of the current view?
Long story short, I had to write one.
The plugin has the following options (all optional):
You may want to have an element within the list as your drag anchor. Don't forget to set the CSS property for the element though (cursor: move). The plugin doesn't do that for you. If this is not set, it means you can drag the whole element.
CSS class to add to the cloned copy of the element.
CSS class to add to the element at the location the currently dragged element can be dropped.
By default, the plugin clones the whole element. Sometimes, we want to clone just a part of the element. The plugin sends the element being dragged as an argument to this function. Simply return your custom clone object. At Prowork for example, the only thing I need is the task title.
If you need to do some things before the drag starts, here is your cue.
Ok, we are done, what's next? Save the new order to db maybe?
Try re-sort the [plugin] options I mentioned above by dragging the title. Here is the setup:
On a final note, I removed and added a couple of things when converting to a jQuery plugin. If somethings don't work, or you have issues somewhere, submit an issue or let me know. Plus be free to fork, iterate and pull.