Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › AppListView via JsonListModel drag and drop issue

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22397

    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

    #22429

    Eric

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

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.