This project is read-only.

hover css for multi-list dragsort

Nov 30, 2011 at 9:46 PM

Hi,

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? 

Many thanks.

David

Dec 9, 2011 at 10:24 PM
Edited Dec 9, 2011 at 11: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).

$(".list").mousemove(function(ev) {
	//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
	$(".placeHolder").each(function() {
		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());
		ph.toggleClass("hover", over);
	});
});