17

私の Web アプリケーションでは、いくつかのドラッグ アンド ドロップ機能を実装しようとしています。基本的なことを行うグローバル JavaScript コンポーネントがあります。このオブジェクトは、現在のドラッグ操作 (移動、コピー、リンク) に応じて、マウス カーソルを変更する役割も果たします。私の Web ページには、インラインまたは CSS ファイルを介して、独自のカーソル スタイルを定義するさまざまな HTML 要素があります。

それで、マウスカーソルが置かれている要素のスタイルとは無関係に、中央のドラッグアンドドロップコンポーネントがマウスカーソルをグローバルに変更する方法はありますか?

私は試した：

document.body.style.cursor = "move"

と

document.body.style.cursor = "move !important"

しかし、うまくいきません。カーソル スタイルを定義する要素をドラッグするたびに、カーソルがそのスタイルに変わります。

確かに、現在ドラッグしている要素のスタイルを変更することはできますが、要素を離れるときにスタイルをリセットする必要があります。これは少し複雑に思えます。グローバルなソリューションを探しています。

4

6 に答える 6

17

重要な更新（2021）：

element.setCapture（）のMDNページは、この機能が非推奨で非標準であることを明確に示しており、本番環境では使用しないでください。

そのページの下部にあるブラウザのサポート表は、FirefoxとIEでのみサポートされていることを示しています。

以下の元の回答

お願い：CSSを虐殺しないでください！

ドラッグアンドドロップ機能を実装するには、非常に重要なAPIであるelement.setCapture（）を使用する必要があります。これは次のことを行います。

  • すべてのマウスイベントは、発生した場所に関係なく（ブラウザウィンドウの外でも）、キャプチャのターゲット要素にリダイレクトされます。
  • カーソルは、マウスポインタがどこにあるかに関係なく、キャプチャのターゲット要素のカーソルになります。

操作の最後に通常モードに戻すには、element.releaseCapture（）またはdocument.releaseCapture（）を呼び出す必要があります。

ドラッグアンドドロップのナイーブな実装に注意してください。たとえば、（とりわけ）次のような多くの厄介な問題が発生する可能性があります。マウスがブラウザのウィンドウの外、または伝播を停止するハンドラーを持つ要素の上で離された場合はどうなりますか。 。setCapture（）を使用すると、このすべての問題が解決され、カーソルスタイルも解決されます。

ドラッグアンドドロップを自分で実装する場合は、これを詳細に説明するこの優れたチュートリアルを読むことができます。

可能であれば、コンテキストでドラッグ可能なjQueryUIを使用することもできます。

于 2012-05-25T12:27:22.740 に答える
6 
document.body.style.cursor = "move"

うまくいくはずです。

ただし、CSS を介してグローバル スタイリングを行うことをお勧めします。

以下を定義します。

body{
   cursor:move;
}

問題は、他の要素に定義されたカーソルが本体のスタイルをオーバーライドすることです。

次のようなことができます。

your-element.style.cursor = "inherit"; // (or "default")

本体または CSS から継承されたスタイルにリセットするには:

body *{
   cursor:inherit;
}

ただし、これ*は通常、セレクターの選択が不適切であると見なされることに注意してください。

于 2012-05-25T08:05:53.793 に答える
5

残念ながらelement.setCapture()IE では動作しません

私はブルート フォース アプローチを使用します - ドラッグ アンド ドロップの間、ページ全体の上に透明な div を開きます。

.tbFiller {
   position:absolute;
   z-index:5000; 
   left:0;
   top:0;
   width:100%;
   height:100%; 
   background-color:transparent;
   cursor:move;
}

...

function dragStart(event) {
    // other code...
    document.tbFiller=document.createElement("div");
    document.tbFiller.className="tbFiller"
}

function dragStop(event) {
    // other code...
    document.tbFiller.parentNode.removeChild(document.tbFiller);
}
于 2012-06-26T12:20:20.390 に答える