I am using jQuery droppable (in conjunction with jQuery draggable) to allow the user to add rows to an HTML table by dragging items from a list and dropping them on the table.
This works well, however at present the logic is that when the user drag-drops on a table row the new row gets added below the row they dropped on.
It would be better if the new row's add position was based on whether the user dropped in the upper or lower half of an existing row.
This is easy enough to calculate in the drop
event, but I need to give UI feedback as the user drags (which I would do by means of two CSS classes droppable-above
and droppable-below
for example).
This doesn't seem to be possible, as the over
event only fires once; when the user initially drags over the droppable element.
Is it possible to get the over
event to fire for every mouse move while the user is over a droppable element?
If so, then I'd be able to do this:
$(tr.droppable).droppable({
over: function(event, ui) {
if (/* mouse is in top half of row */) {
$(this).addClass(droppable-above).removeClass(droppable-below);
}
else {
$(this).removeClass(droppable-above).addClass(droppable-below);
}
},
out: function(event, ui) {
$(this).removeClass(droppable-above).removeClass(droppable-below);
},
drop: function(event, ui) {
$(this).removeClass(droppable-above).removeClass(droppable-below);
if (/* mouse is in top half of row */) {
// Add new row above the dropped row
}
else {
// Add new row below the dropped row
}
}
});
The CSS styles would be something like...
droppable-above { border-top: solid 3px Blue; }
droppable-below { border-bottom: solid 3px Blue; }