I have a list of tasks that are all draggable and droppable. All of them have an 'over' event handler to make sure they light up when another task is hovering over them.
This is not working fully as I want it to. When I start dragging one task, the other tasks don't light up as expected, except when the mouse is not actually above the draggable helper (this is possible because I have specified axis='y', so that I can move the cursor left and right of the helper without breaking the drag session).
I thought the problem might be that the task I'm dragging is also droppable, so I specified that once it is being dragged, its droppability must be disabled.
So why does having a draggable helper over a droppable target not trigger the over event, while having the cursor over the droppable target does trigger that event?
Here's the code:
$(mySubtasks).each(function(){
var _this = this;
$(_this).draggable({
axis: 'y',
containment: '#plannerTab',
disabled: true,
revert: 'invalid',
start: function(e, ui){
currentlyDragging = true;
$(_this).droppable('disable');
$('#messageArea').text('Currently dragging');
$(_this).css('position', 'absolute');
},
stop: function(e, ui){
currentlyDragging = false;
returnToSortableTasklist();
$(_this).css('position', 'relative');
}
});
$(_this).droppable({
accept: '.subtask',
disabled: true,
drop: function(e, ui){
setTimeout('currentlyDragging = false;', 1000);
alert('Dropped something legal on a subtask');
//Deactivate all draggable/droppable and reinstate sortable
returnToSortableTasklist();
},
over: function(e, ui){
$(this).addClass('dragdropTargetHover');
$(ui.helper).addClass('dragdropHelperHover');
},
out: function (e, ui){
$(this).removeClass('dragdropTargetHover');
$(ui.helper).removeClass('dragdropHelperHover');
}
});