Question

当我将文件拖到我的窗口时，我希望显示一个叠加层，当文件被拖离窗口时，我希望删除叠加层。

$(window).on('dragleave', this.onDragLeave);

$(window).on('dragenter', this.onDragEnter);

p.onDragEnter = function(e) {

    console.log('ENTER');
};


p.onDragLeave = function(e) {
        console.log('LEAVE');
};

以上工作正常，当我进入和离开窗口时，它正确记录。

当我开始淡入和淡出我的叠加层时，问题就出现了：

p.onDragEnter = function(e) {

    console.log('ENTER');
    $('#drag-overlay').fadeIn();
};


p.onDragLeave = function(e) {
        console.log('LEAVE');
        $('#drag-overlay').fadeOut();
};

有了上述内容，它只是一次又一次地淡入淡出。我不知道最近会发生什么事情，好像当叠加层消失时会发出拖动假，我不知道为什么会这样做？

叠加层只是一个绝对的div，宽度和高度100％。

Answer 1

问题在于，通过显示叠加层，您将导致拖动的项目离开父项并拖动到叠加层中。然后隐藏叠加层会导致拖动在父窗体中触发。

幸运的是，解决方案很简单，可以在css中完成：

#drag-overlay
{
    pointer-events: none;
    ...
}

有关可行的解决方案，请参阅 this jsfiddle 。

如果删除pointer-events:none，则会获得相同的行为。 pointer-events:none只是意味着在拖动叠加层时不会触发父ondragleave方法。

拖动离开并拖动回车

1 个答案: