2

たとえば、次のページに移動すると: http://grooveshark.com/#!/search?q=stackoverflowそして曲のドラッグを開始すると、この素敵なドラッグ アンド ドロップ動作が得られます。

ドラッグ開始

次に、ドラッグ アンド ドロップ中に、ドロップを受け入れるゾーンにカーソルを合わせると、カーソルの下のイメージが変化して、ドロップが可能であることが表示されます。

ドラッグオーバー

この種のものを使用する機会はありますGWTか?

一部のテキスト用にダミーのウィジェットを作成しましたが、ドラッグの開始後に DragImage を変更しても機能しないようです。カーソルの変更も試みましたが、成功しませんでした

@Override
        public void onDragOver(DragOverEvent event) {
            dragIndicator.setInnerText("CAN DROP !");
            event.getDataTransfer().setDragImage(dragIndicator,
                    10, 10);
        }

ドラッグ アンド ドロップ機能があるのは便利ですが、ここで見たようにhttp://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html#BinExampleエレメント。私が間違っている ？

編集

W3C ( http://dev.w3.org/html5/spec/dnd.html#the-drag-data-store ) を読むと、私はこれに遭遇しました:

dropEffect 属性は、ドラッグ アンド ドロップ操作中にユーザーに与えられるドラッグ アンド ドロップ フィードバックを制御します。DataTransfer オブジェクトが作成されると、dropEffect 属性が文字列値に設定されます。取得時に、現在の値を返す必要があります。設定時に、新しい値が「none」、「copy」、「link」、または「move」のいずれかである場合、属性の現在の値を新しい値に設定する必要があります。他の値は無視する必要があります。

ただし、GWTコードでそのようなものは見つかりませんでした。おそらくJSNIを使用して試してみます（標準かどうかを確認する必要があります）

4

1 に答える 1

1

さて、JSNIを使用してホバリング中にカーソルを変更することができました（FF 15でのみテスト済み）。これは完全で正しいとは言えません。

public class MonWidget extends Widget implements HasAllDragAndDropHandlers {

private DivElement mainDiv;

public MonWidget()
{
    mainDiv = Document.get().createDivElement();

    SpanElement span1 = Document.get().createSpanElement();
    span1.setInnerText("span1");
    span1.setDraggable(Element.DRAGGABLE_TRUE);
    span1.getStyle().setBackgroundColor("red");

    SpanElement span2 = Document.get().createSpanElement();
    span2.setInnerText("span2");
    span2.setDraggable(Element.DRAGGABLE_TRUE);
    span2.getStyle().setBackgroundColor("blue");    

    mainDiv.appendChild(span1);
    mainDiv.appendChild(span2);

    setElement(mainDiv);

    this.addDragStartHandler(new DragStartHandler() {
        public void onDragStart(DragStartEvent event) {

            Element element = Element.as(event.getNativeEvent().getEventTarget());
            event.setData("text", "some data");
            event.getDataTransfer().setDragImage(element,
                    10, 10);        
        }
    });

    this.addDragOverHandler(new DragOverHandler() {

        @Override
        public void onDragOver(DragOverEvent event) {
            setEffet(event.getNativeEvent(),"copy");
            //setEffet(event.getNativeEvent(),"link");
            // THIS do not seems to work - setEffet(event.getNativeEvent(),"move");
            event.stopPropagation();
        }
    });
}
....

そしてJSNIメソッド：

public final native void setEffet(NativeEvent e, String effect) /*-{
     var dt = e.dataTransfer;
     dt.dropEffect = effect;
  }-*/;
于 2012-10-15T22:44:52.857 に答える