[Eric]

Hello,

I have an AppListView set up, population by a JsonListModel. I have a drag and drop scenario set up and although it works for the most part, there is an animation issue I can’t figure out. When I drag an item down the list, the transition animation works as intended, however, when I drag an item up, there is no transition animation, the replaced item in the list moves down instantly.

import Felgo 3.0
import QtQuick 2.12

App {
    Page {
        id: pageJSONDragDrop

        property var jsonData: [
            {
                "id": 1,
                "text": "Entry 1",
                "color": "red"
            },
            {
                "id": 2,
                "text": "Entry 2",
                "color": "green"
            },
            {
                "id": 3,
                "text": "Entry 3",
                "color": "blue"
            }
        ]

        AppListView {
            id: appListView
            anchors.fill: parent
            model: jsonModel
            delegate: appListViewDelegate

            displaced: Transition {
                NumberAnimation{
                    properties: "y"
                    duration: 200
                }
            }

            JsonListModel {
                id: jsonModel
                source: pageJSONDragDrop.jsonData
                keyField: "id"
            }

            Component {
                id: appListViewDelegate

                MouseArea {
                    id: dragArea

                    width: 500; height: 100

                    property int item_id: model.id
                    property bool held: false
                    property int lastY: 0
                    property bool moveDown: false

                    onYChanged: {
                        moveDown = lastY < y
                        lastY = y
                    }

                    drag.target: held ? content : undefined
                    drag.axis: Drag.YAxis

                    onPressed: held = true
                    onReleased: held = false

                    ListView.onAdd: SequentialAnimation {
                        PropertyAction { target: dragArea; property: "height"; value: 0 }
                        NumberAnimation { target: dragArea; property: "height";
                            to: 100; duration: 250; easing.type: Easing.InOutQuad }
                    }

                    Rectangle {
                        id: content

                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        }
                        width: 500
                        height: 100

                        color: model.color
                        //                            text: texte
                        opacity: dragArea.held ? 0.8 : 1.0

                        Drag.active: dragArea.held
                        Drag.source: dragArea
                        Drag.hotSpot.x: width / 2
                        Drag.hotSpot.y: height / 2

                        //                            property string texte

                        states: State{
                            when: dragArea.held
                            ParentChange { target: content; parent: appListView }
                            AnchorChanges {
                                target: content
                                anchors { horizontalCenter: undefined; verticalCenter: undefined }
                            }
                        }
                        AppText {
                            text: model.text
                            color: "white"
                        }
                    }

                    DropArea {
                        anchors.fill: parent
                        onEntered: {
                            jsonModel.move(
                                        jsonModel.indexOf("id", drag.source.item_id),
                                        jsonModel.indexOf("id", dragArea.item_id)
                                        )
                            if (dragArea.moveDown)
                                appListView.currentIndex = jsonModel.indexOf("id", dragArea.item_id) + 1
                            else
                                appListView.currentIndex = jsonModel.indexOf("id", dragArea.item_id) - 1
                        }
                    }
                }
            } // End Component
        }

        AppButton {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom

            text: "Move Element"
            onClicked: {
                jsonModel.move(1,2)
            }
        }
    } // Page
}

Any help on why the transition animation only works in one direction will be very helpful.

Thank you,
Eric

[Eric]

I don’t know if bumping is allowed but I still can’t figure this out. Thank you.