开发者

jQuery droppable 'over' event not firing when mouse is over draggable

开发者 https://www.devze.com 2023-01-06 09:02 出处:网络
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.

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');
                        }
                    });


And something else was interfering too: when dragged, the helper was physically rather small. I made sure to set them a nice size on start of draggable, so that they would easily be 'detected' by the droppables over which I was dragging them.


I found that my "drop" even always triggered, even though my "over" event did not - specifically when I was dragging my object to another object that was close to the object being dragged. The suggestion of playing with the size of the helper did not work for me, but got me experimenting with the other attributes. I was surprised to find that when I increased my scrollSensibility, my problem went away. That is, because my draggable area was very large (horizontally), I had set scroll:true and scrollSensitivity:160. When I increased my scrollSensitivity to 400, my problem went away.

0

精彩评论

暂无评论...
验证码 换一张
取 消