57

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

4

8 回答 8

75

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

我使用自定义 jQuery 实现来进行拖动，并在处理程序中添加这一行在mousedownChrome 中为我解决了问题。

e.originalEvent.preventDefault();
于 2012-03-16T19:27:46.733 回答
22

尝试关闭文本选择事件。

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

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

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

document.onselectstart = function(){ return true; }
于 2010-06-03T21:23:16.050 回答
17

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

element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
于 2012-10-18T14:59:19.637 回答
7

陷阱

你不能把

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

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

解决方案

因此，要使其正常工作，您需要在 mousedown 事件之前执行此操作。我在 mouseover 事件中做到了，因为一旦鼠标进入我的元素，我希望它是可拖动的，而不是可选择的。然后你可以把

document.onselectstart = null;

调用 mouseout 事件。但是，有一个问题。拖动时，可能会调用 mouseover/mouseout 事件。为了解决这个问题，在您的拖动/mousedown 事件中，将 flag_dragging 设置为 true，并在拖动停止（mouseup）时将其设置为 false。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;
    }
});
于 2011-10-13T22:14:47.440 回答
6

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

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

.your-class:active {
    cursor: crosshair;
}
于 2012-05-30T08:37:31.520 回答
3

我面临着几乎同样的问题。我希望我的 DIV 元素及其所有子元素中的光标成为默认值，此处的 CSS 提示有助于 IE、FF 和 Opera，但不适用于 Google Chrome。这是我在父 DIV 中所做的：

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

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

于 2013-01-04T14:42:05.130 回答
2

我在使用 jQuery UI 可拖动和可排序（版本 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 代码中的修复，所以基本上它可能会破坏某些东西。

于 2010-05-31T13:10:18.297 回答
2

只需在您的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;
}
于 2012-07-19T02:14:59.723 回答