在拖动事件期间无法启动新的jquery函数

Question

我注意到从页面外拖动元素时不会触发CSS悬停功能。我希望有一个“放在这里”的div，当鼠标悬停在它上面时会亮起，但悬停不起作用，也不会这样：

    // Cosmetic thing
    $('#dropzone').on({
        dragover: function(e) {
            $('#dropzone').addClass('on');
        },
        dragleave: function(e) {
            $('#dropzone').removeClass('on');
        }
    });

我可以在检查器中看到正在添加类IS，但它没有点亮。

我也尝试在拖动时关闭弹出放置区域，但是在我放开鼠标之后，事件似乎没有工作：

        $(document).on('mousemove',function(e){
            console.log('x:'+e.pageX+' y:'+e.pageY);
            if (e.pageX <= 0 || e.pageX > $(document).width() || e.pageY <= 0 || e.pageY > $(document).height())
            {
                dropperOff();
                $(document).unbind('mousemove');
            }
        });

最后，我尝试了一个持续的mousemove跟踪事件，它始终填充mouseX和mouseY变量。当我移动鼠标时，它工作正常，但是当dragenter事件触发时，mousemove事件也会停止工作。

这种行为使得页面工作非常困难。有没有办法解决这个问题，还是我不得不放弃让我的dropzone点亮并检测拖动事件何时离开页面？