Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded