DragAreaのドロップエフェクトを受け取ったDropAreaにアニメーション化するにはどうすればよいですか？

Question

これは何らかの意味での質問です。私のアプリでは、それぞれDropAreaが入っているさまざまな矩形の上にドラッグを開始するために使用するDragAreaが定義されています。変更したい美容効果については、以外はすべてを除いてすべて正常に機能しています。あなたはDragAreaからドラッグを開始し、最終的にドロップQMLで

は、アニメーション効果は、（フェードアウトながら）あなたはスポットに戻ってアニメーション化をドラッグしている事はそこから はドラッグを開始したようなものです。これは、ドロップを正常にキャプチャした DropAreaをドロップしても発生します。

私がしたいことは、ドロップ効果をドロップを受け取ったDropAreaの方にアニメーションさせることです。その結果、私は四角形にドラッグアンドドロップするように見えます。これを行う方法はありますか？

これは、これらの領域の.sourceプロパティと.targetプロパティが何らかの形で関係していると推測していますが、これまでドロップアニメーションの場所に影響を与えることはありませんでした。

Answer 1

デフォルトでは、QMLはドラッグアンドドロップの美容動作を行いません。ドラッグターゲットはドラッグ開始位置から開始され、ドラッグが受け入れられているかどうかに関係なく、ドロップされた場所で終了します。

このように、あなたが記述した動作は、あなたが公開していないユーザコードに実装されていると仮定します。それにかかわらず、あなたがやりたいことは非常に簡単です。ドラッグの開始位置と終了位置を追跡するので、2つの座標を使用して位置をアニメートできます。

次の例では、赤い矩形をドラッグすることができます。ドロップ領域の外にドロップすると、現在の位置から初期の位置にアニメートされますが、黄色の矩形にドロップされた場合、落下位置。

Window { 
    width: 600 
    height: 600 
    visible: true 

    Rectangle { 
    width: 200 
    height: 200 
    color: "yellow" 
    DropArea { 
     anchors.fill: parent 
     onEntered: drag.source.accepted = true 
     onExited: drag.source.accepted = false 
    } 
    } 

    Rectangle { 
    id: rect 
    width: 50 
    height: 50 
    color: "red" 
    x: parent.width * 0.5 
    y: parent.height * 0.5 
    Drag.active: mouseArea.drag.active 

    property point begin 
    property point end 
    property bool accepted : false 

    MouseArea { 
     id: mouseArea 
     anchors.fill: parent 
     drag.target: parent 
     onPressed: rect.begin = Qt.point(rect.x, rect.y) 
     onReleased: { 
     rect.end = Qt.point(rect.x, rect.y) 
     aX.from = rect.accepted ? rect.begin.x : rect.end.x 
     aX.to = rect.accepted ? rect.end.x : rect.begin.x 
     aY.from = rect.accepted ? rect.begin.y : rect.end.y 
     aY.to = rect.accepted ? rect.end.y : rect.begin.y 
     anim.start() 
     } 
     ParallelAnimation { 
     id: anim 
     NumberAnimation { id: aX; target: rect; property: "x"; duration: 200 } 
     NumberAnimation { id: aY; target: rect; property: "y"; duration: 200 } 
     } 
    } 
    } 
}