当鼠标位于可拖动上方时,jQuery droppable 'over' 事件不会触发

标签 jquery hover draggable droppable

我有一个可拖放的任务列表。它们都有一个“over”事件处理程序,以确保当另一个任务悬停在它们上方时它们会亮起。

这并没有完全按照我想要的方式工作。当我开始拖动一个任务时,其他任务不会按预期亮起,除非鼠标实际上不在可拖动助手上方(这是可能的,因为我已指定 axis='y',以便我可以移动光标帮助器的左侧和右侧,而不中断拖动 session )。

我认为问题可能是我正在拖动的任务也是可放置的,因此我指定一旦拖动它,就必须禁用其可放置性。

那么为什么在可放置目标上放置可拖动助手不会触发 over 事件,而将光标放置在可放置目标上却会触发该事件?

代码如下:

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

最佳答案

还有其他一些因素也在干扰:当被拖动时,帮助者的 body 相当小。我确保在可拖动开始时将它们设置为一个合适的大小,以便我拖动它们的可放置对象很容易“检测到”它们。

关于当鼠标位于可拖动上方时,jQuery droppable 'over' 事件不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3187337/

相关文章:

html - 在相对定位的容器之间移动可拖动元素

jquery-ui - jQuery UI 可拖动到更小的可放置对象

javascript - 使下拉菜单可见的javascript

javascript - 是否有使用事件委托(delegate)的 Javascript "tap"事件库?

javascript - JS cookie 下降和倒数计时器不工作

javascript - jTable 条件显示\隐藏基于数据所有者的编辑和删除按钮

javascript - Extjs 4 网格悬停效果

javascript - jQuery渐变下沉效果按钮

jquery - 将 LI 从 UL A 拖到 UL B 并从 UL A 中删除?

javascript - Css Hover div 没有按预期工作