Wie kann ich die Drop-Effekt eines DragArea in Richtung DropArea zu animieren, die sie empfangen?

Question

Hoffe, dass dies ein Gefühl als eine Frage macht. In meiner Anwendung habe ich ein DragArea definiert, die ich starten verwenden, um Dinge über die Oberseite der verschiedenen Rectangles ziehen, die jeweils ein DropArea enthalten. Alles funktioniert gut in meinem Code außer für eine kosmetische Wirkung, die ich ändern möchte.

In QML, wenn Sie von einem DragArea ziehen beginnen und schließlich fallen, ist der Animationseffekt, so dass das, was Sie belebt sind Ziehen an den Ort, von dem Sie gestartet Schleppen (während Ausblendung) zurück. Dies passiert sogar, wenn Sie eine DropArea fallen lassen, die den Tropfen erfolgreich erfasst.

Was ich möchte, ist die Drop-Effekt animieren in Richtung der DropArea, die den Tropfen erhalten - so dass es scheint, ich ziehe Dinge in das Rechteck. Gibt es eine Möglichkeit, dies zu tun?

Ich vermute, dass dies in gewisser Weise die .source und .target -Eigenschaften dieser Bereiche beinhaltet, aber bisher kein Glück, was die Drop-Animation angeht.

Answer 1

Standardmäßig wird QML geben Ihnen kein kosmetisches Verhalten für Drag-and-Drop zu löschen. Das Ziehziel beginnt am Ziehstartort und endet an der Stelle, an der es abgelegt wurde, unabhängig davon, ob der Ziehvorgang akzeptiert wird oder nicht.

So gehe ich davon aus dem Verhalten, das Sie in Ihrem Benutzercode beschreiben implementiert, die Sie nicht bekannt gegeben haben. Unabhängig davon, was Sie tun möchten, ist ziemlich einfach, es beinhaltet die Verfolgung der Position, aus der der Widerstand stammt und endet bei, so dass Sie die zwei Koordinaten verwenden können, um die Position zu animieren.

Im folgenden Beispiel kann das rote Rechteck gezogen werden, und wenn es außerhalb eines Drop-Bereichs abgelegt wird, wird es von seiner aktuellen Position zu seiner ursprünglichen Position animiert. Wenn es im gelben Rechteck abgelegt wird, animiert es von seinem Anfang zu seinem Drop-Position.

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