鼠标指针在拖动事件中一直闪烁

mouse pointer keeps blinking during drag event

本文关键字：一直 闪烁 事件 拖动 鼠标指针      更新时间：2023-09-26

所以我在树中有一些项。我使用本地javascript实现拖放，因为我使用GWT及其库对我不可用。树应该支持复制项目（拖动项目并将其放置在另一个项目中）和重新排序项目（在项目之间拖动项目并放置）。我试图根据鼠标位置来确定这个动作，但问题是在拖动事件期间，指针一直在闪烁，例如在"手"图标和"加号"图标之间切换。这就是我在第一个原型中所做的只是CSS的改变：

 $doc.TreeOnReorderOver = function(ev) {
        ev.preventDefault();
        var rect = ev.target.getBoundingClientRect();
        var top = rect.top;
        var bottom = rect.bottom;
        var height = bottom - top;
        ev.target.style.cursor='none';
        if(ev.clientY >= top && ev.clientY < top + height/4) { //reorder top
              ev.target.style.backgroundColor = 'transparent';
              ev.target.style.borderStyle = 'solid none none none'; 
              ev.target.style.borderWidth = '3px';
              ev.target.style.borderColor = '#D1E4EB';
        }
        if(ev.clientY >= top + height/4 && ev.clientY < bottom  - height/4) { //drop in
              ev.target.style.border = 'none';
              ev.target.style.backgroundColor = '#D1E4EB';
        }
        if(ev.clientY >= bottom - height/4 && ev.clientY < bottom) { //reorder bottom
              ev.target.style.backgroundColor = 'transparent';
              ev.target.style.borderStyle = 'none none solid none'; 
              ev.target.style.borderWidth = '3px';
              ev.target.style.borderColor = '#D1E4EB';
        }
    };

有什么办法解决这个问题吗？

这个问题实际上是最新的。您已将光标设置为在移动的对象上没有指针：

ev.target.style.cursor='none';

所以，只要你的鼠标悬停在目标上（我猜是你拖动的对象），它就不会有指针。

拖动对象时，光标首先移动（悬停在其他元素上），然后将对象移动到光标的位置。这将导致您的光标切换回指针。

请尝试为拖动的持续时间设置document.body.style.cursor='none';。

相关文章：