当鼠标悬停时,jQuery droppable'over'事件不会触发

时间:2010-07-06 14:53:40

标签: jquery hover draggable droppable

我有一个可拖动且可放置的任务列表。所有这些都有一个'over'事件处理程序,以确保当另一个任务悬停在它们上时它们会亮起。

这并不像我想要的那样完全正常。当我开始拖动一个任务时,其他任务没有按预期点亮,除非鼠标实际上不在可拖动帮助器之上(这是可能的,因为我已经指定了axis ='y',所以我可以移动光标帮助者的左右两边而不会破坏拖动会话。)

我认为问题可能是我拖动的任务也是可以删除的,所以我指定一旦拖动它,就必须禁用它的可丢弃性。

那么为什么在可放置目标上有一个可拖动的助手不会触发过度事件,而在可放置目标上有光标会触发该事件?

以下是代码:

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

2 个答案:

答案 0 :(得分:1)

还有其他东西在干扰:拖动时,助手身体相当小。我确保在可拖动的开始时设置它们一个不错的大小,这样它们很容易被我拖动它们的droppables“检测到”。

答案 1 :(得分:1)

我发现我的“掉落”甚至总是被触发,即使我的“结束”事件没有 - 特别是当我将对象拖动到另一个靠近被拖动对象的对象时。玩帮助器大小的建议对我来说不起作用,但让我尝试了其他属性。我惊讶地发现,当我增加了scrollSensibility时,我的问题就消失了。也就是说,因为我的可拖动区域非常大(水平),我设置了scroll:true和scrollSensitivity:160。当我将scrollSensitivity增加到400时,我的问题就消失了。

相关问题