Question

我的应用程序有许多拖放功能。拖动时我希望光标更改为某些抓取光标。 Internet Explorer和Firefox可以正常工作，但Chrome总是将光标更改为文本光标。

Answer 1

这些解决方案都不适合我，因为代码太多了。

我使用自定义jQuery实现进行拖动，并在mousedown处理程序中添加此行为我在Chrome中做了诀窍。

e.originalEvent.preventDefault();

Answer 2

尝试关闭文字选择事件。

document.onselectstart = function(){ return false; }

这将禁用页面上的任何文本选择，并且浏览器似乎开始显示自定义游标。

但请记住，文本选择根本不起作用，因此最好只在拖动时进行，然后在此之后再次打开它。只需附加不返回false的函数：

document.onselectstart = function(){ return true; }

Answer 3

如果您想阻止浏览器选择元素中的文本并显示选择光标，您可以执行以下操作：

element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);

Answer 4

陷阱

你不能把

document.onselectstart = function(){ return false; };

进入你的“mousedown”处理程序，因为onselectstart已被触发。

解决方案

因此，为了让它工作，你需要在mousedown事件之前完成它。我在mouseover事件中做到了，因为只要鼠标进入我的元素，我就希望它可以拖动，而不是可选择的。

然后就可以了

document.onselectstart = null;

调用mouseout事件。然而，有一个问题。拖动时，可能会调用mouseover / mouseout事件。为了解决这个问题，在dragging / mousedown事件中，将flag_dragging设置为true，并在拖动停止时将其设置为false（mouseup）。 mouseout函数可以在设置

之前检查该标志

document.onselectstart = null;

实施例

我知道你没有使用任何库，但这里有一个jQuery代码示例，可能会帮助其他人。

var flag_dragging = false;//counter Chrome dragging/text selection issue
$(".dragme").mouseover(function(){
    document.onselectstart = function(){ return false; };
}).mouseout(function(){
    if(!flag_dragging){
        document.onselectstart = null;
    }
});

//make them draggable
$(".dragme").draggable({
    start: function(event, ui){
        flag_dragging = true;
    }, stop: function(event, ui){
        flag_dragging = false;
    }
});

Answer 5

我通过使Elements不可选，并在draged元素上添加一个活动的伪类来解决同样的问题：

* {
    -webkit-user-select: none; 
}

.your-class:active {
    cursor: crosshair;
}

Answer 6

我有一个类似的问题，使用jQuery UI draggable和sortable（版本1.8.1），它非常具体，所以我假设你使用相同的库。

问题是由jQuery UI中的错误引起的（实际上是其他Safari错误的修复）。我刚刚在jQuery UI http://dev.jqueryui.com/ticket/5678中提出了这个问题，所以我想你需要等到它被修复。

我已经为此找到了一个解决方法，但它非常坚固，所以如果你真的知道发生了什么，你只能使用它;）

if ($.browser.safari) {
    $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
    $.ui.mouse.prototype._mouseDown = function(event){
        event.preventDefault();
        return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
    }
}

它只是关闭了jQuery UI代码中的修复，所以基本上它可以破解。

Answer 7

只需在mousedown事件

中使用此行即可

arguments[0].preventDefault();

您还可以通过CSS将此类添加到可拖动元素

来禁用文本选择

.nonselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 8

我遇到了几乎同样的问题。我希望我的DIV元素中的光标和它的所有子元素都是默认值，这里的CSS提示在IE，FF和Opera中有所帮助，但对谷歌Chrome没有帮助。这是我在父DIV中所做的：

<div ... onselectstart="return false;" ... > ... </div>

现在工作正常。希望这有帮助。

chrome在拖动时将光标设置为文本，为什么？

8 个答案:

陷阱

解决方案

实施例