chrome устанавливает курсор на текст при перетаскивании, почему?

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

Pitfall

Вы не можете поставить

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

в ваш обработчик "mousedown", потому что onselectstart уже запущен.

Решение

Таким образом, чтобы это работало, вам нужно сделать это до события mousedown. Я сделал это в событии mouseover, так как как только мышь входит в мой элемент, я хочу, чтобы он был перетаскиваемым, а не выбираемым. Тогда вы можете поставить

document.onselectstart = null;

вызов события mouseout. Тем не менее, есть подвох. При перетаскивании может быть вызвано событие mouseover / mouseout. Чтобы противостоять этому, в вашем событии перетаскивания / вставки установите значение 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

Я решил ту же проблему, сделав элементы невыбираемыми и добавив активный псевдокласс на перетаскиваемых элементах:

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

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

Answer 6

Я столкнулся почти с той же проблемой. Я хочу, чтобы курсор внутри моего элемента DIV и всех его дочерних элементов был по умолчанию, подсказки CSS здесь помогли в IE, FF и Opera, но не для Google Chrome. Вот что я сделал в родительском DIV:

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

Теперь все работает нормально. Надеюсь, что это поможет.

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

У меня похожая проблема с использованием перетаскиваемого и сортируемого пользовательского интерфейса jQuery (версия 1.8.1), и она довольно специфична, поэтому я предполагаю, что вы используете ту же библиотеку.

Проблема вызвана ошибкой в ​​пользовательском интерфейсе jQuery (фактически исправлением для другой ошибки 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, поэтому, в принципе, он может сломать что-то.