Question

所以我在树上有som项目。我正在使用本机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';
        }

    };

任何想法如何解决这个问题？

Answer 1

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

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

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

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

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

拖动事件期间鼠标指针一直闪烁

1 个答案: