Great jquery plugin!
I'm working on a project that requires draging items between multiple lists, and sorting inside of those lists, and have added this plugin very easily. Thank you! It's far better than the sortables that jquery has.
The one thing i would like to have is a hover css change on the placeholder element that is about to be dropped onto. I've tried adding a jquery 'live' hover event to the li.placeholder, but it doesn't seem to take when in the middle of the drag.
- or maybe it's just my poor coding skills -.
Is this possible? any suggestions on how to achieve?
Dec 9, 2011 at 9:24 PM
Edited Dec 9, 2011 at 10:31 PM
Thanks for the feedback David. The reason hover isn't working is because the dragged item is between the mouse and the placeholder, it only works if the mouse is directly over the placeholder. What we can do is attach a mousemove event on the list and then
compare the co-ordinates to see if it's over the placeholder. The mousemove event on the list works because the dragged item is a child element of the list and events bubble up to parent elements (i.e. the dragged item triggers the event which bubbles / propagates
to the parent element the list and fires the handlers on it).
//the placeholder template is used to create the droptarget for all the lists if
//there's multiple, so loop thru to only reference one placeHolder element at a time
var ph = $(this);
var pos = ph.offset();
var over = ev.pageX >= pos.left && ev.pageX <= (pos.left + ph.width()) &&
ev.pageY >= pos.top && ev.pageY <= (pos.top + ph.height());