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

    Felgo User

    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

    Felgo User

    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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support