web-dev-qa-db-ja.com

chromeドラッグ中にカーソルをテキストに設定します、なぜですか？

私のアプリケーションには、多くのドラッグアンドドロップ機能があります。ドラッグ中に、カーソルをグラブカーソルに変更します。 Internet ExplorerとFirefoxはこれで問題なく動作しますが、Chromeは常にカーソルをテキストカーソルに変更します。

textcursorgoogle-chromedrag
56
user307635

コードが多すぎるため、これらのソリューションはどれもうまくいきませんでした。

私はカスタムjQuery実装を使用してドラッグを実行し、mousedownハンドラーにこの行を追加すると、Chromeでうまくいきました。

e.originalEvent.preventDefault();
73
tim

テキスト選択イベントをオフにしてみてください。

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

これにより、ページ上のanyテキスト選択が無効になり、ブラウザがカスタムカーソルを表示し始めるようです。

ただし、テキストの選択はまったく機能しないので、ドラッグ中にのみ選択し、その直後に再度オンにすることをお勧めします。 falseを返さない関数をアタッチするだけです。

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

ブラウザが要素内のテキストを選択して選択カーソルを表示しないようにするには、次のようにします。

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

落とし穴

あなたは置くことができません

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

onselectstartがすでにトリガーされているため、「マウスダウン」ハンドラーに追加します。

解決

したがって、これを機能させるには、mousedownイベントの前に実行する必要があります。私はマウスオーバーイベントでそれを行いました。マウスが要素に入るとすぐに、それをドラッグではなく、選択できないようにしたいからです。次に、置くことができます

document.onselectstart = null;

マウスアウトイベントを呼び出します。ただし、落とし穴があります。ドラッグ中に、mouseover/mouseoutイベントが呼び出される場合があります。これに対抗するには、ドラッグ/マウスダウンイベントで、flag_draggingをtrueに設定し、ドラッグが停止したときにそれをfalseに設定します（マウスアップ）。マウスアウト機能は、設定する前にそのフラグをチェックできます

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;
    }
});
7
Finch_Powers

要素を選択不可にして、ドラッグした要素にアクティブな疑似クラスを追加することで、同じ問題を解決しました。

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

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

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;
}
2
Vitim.us

私はほとんど同じ問題に直面していました。 DIV要素内のカーソルとそのすべての子をデフォルトにしたいのですが、ここでのCSSのヒントはIE、FF、Operaで役立ちましたが、Google Chromeでは役に立ちませんでした。これは私が親DIVで行ったことです：

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

現在は正常に動作しています。この助けを願っています。

2
Alexandre Martins

ドラッグとソートが可能な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コードにある修正をオフにするだけなので、基本的には何かがbreakする可能性があります。

2
bartaz