57

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

4

8 に答える 8

75

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

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

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

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

解決

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

document.onselectstart = null;

mouseout イベントを呼び出します。ただし、落とし穴があります。ドラッグ中に、mouseover/mouseout イベントが呼び出される場合があります。これに対抗するには、ドラッグ/マウスダウン イベントで flag_dragging を true に設定し、ドラッグが停止 (マウスアップ) したときに 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のドラッグ可能およびソート可能（ver。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 に答える