2

GWT 2.4 ドラッグ アンド ドロップ API を使用して、ウィジェット間のデータ転送用の要素をドラッグしています。ドラッグ アンド ドロップ動作の実装は簡単でしたが、要素のドラッグ中にカーソルを変更する際に問題が発生しました。少し調査を行ったところ、これを達成する方法に関するいくつかの記事が見つかりました。

この記事http://blog.vjeux.com/2012/css/css-cross-browser-drag-cursor.htmlは、 cursorプロパティを必要な許容値に設定することで実行できることを示唆しています。ドラッグする要素または要素をドロップできる要素で(カーソル:-webkit-drag;またはカーソル:移動; )試しましたが、カーソルアイコンの右下に小さな画像しか追加しませんでした。

これhttp://www.html5rocks.com/en/tutorials/dnd/basics/を見てみると、 dataTransferオブジェクトからeffectAlloweddropEffectを設定することで、ドラッグ&ドロップ時のカーソル(エフェクト)を変更できるとのこと。GWT ドラッグ アンド ドロップ API はこれらのプロパティを公開していませんが、 JSNIを介して設定できますが、効果は以前と同じでした (CSS を使用)。

これらの質問HTML5 Drag & Drop Change icon/cursor while dragChanging Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop)を同じ件名で見つけましたが、ドラッグ中に実際にアイコンを変更/置換するのに役立つものはありませんでした。

どんな助けでも大歓迎です。

テスト環境:

Ubuntu 12.04.1 クローム 22

乾杯、

4

1 に答える 1

0

最も簡単な方法は次を使用することだと思います:

RootPanel.getBodyElement().getStyle().setCursor(Cursor.MOVE);

移動を開始するたびに:

RootPanel.getBodyElement().getStyle().setCursor(Cursor.DEFAULT);

あなたがやったときはいつでも。

また、CSS プロパティを設定することもできます。

cursor: whatever;

あなたが望むどんな要素でも。通常は次のように使用します。

div.over-this-div-the-cursor-becomes-different:hover {
    cursor: move;
}

参照: http://www.w3schools.com/cssref/pr_class_cursor.asp

于 2012-10-11T15:54:44.720 に答える