Item {
    id: root
    visible: true

    ListView {
        id: lView
        orientation: ListView.Vertical
        model: visualModel
        anchors.fill: parent

        DelegateModel {
            id: visualModel
            model: itemsList

            delegate: Rectangle {
                id: listItem
                color: tapArea.held ? "lightsteelblue" : modelData.Marked ? "darkgrey" : "yellow"
                Behavior on color { ColorAnimation { duration: 100 } }

                width: lView.width
                height: 200
                border.width: 1
                border.color: "blue"

                states: State {
                    when: tapArea.held

                    ParentChange { target: listItem; parent: root }
                    AnchorChanges {
                        target: listItem
                        anchors { horizontalCenter: undefined; verticalCenter: undefined }
                    }
                }

                Drag.active: tapArea.held
                Drag.source: tapArea
                Drag.hotSpot.x: width / 2
                Drag.hotSpot.y: height / 2
                
                MouseArea {
                    id: tapArea
                    z: -1
                    anchors.fill: parent
                    onDoubleClicked: { modelData.EditedIndex = index }

                    property bool held: false
                    property int lasty: 0
                    property bool moveUp: false
                    onYChanged: { moveUp = lasty > y; lasty = y }

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

                    onPressAndHold: held = true
                    onReleased: held = false

                    DropArea {
                        anchors { fill: parent; margins: 10 }

                        onEntered: {
                            console.warn(itemName.text)
                            //visualModel.items.move(
                            //           drag.source.DelegateModel.itemsIndex,
                            //           tapArea.DelegateModel.itemsIndex )
                            //lView.currentIndex = tapArea.DelegateModel.itemsIndex + (tapArea.moveUp ? -1 : 1)
                        }
                    }
                }
            }
        }
        ScrollBar.vertical: ScrollBar{
            active: true
            width: 20
        }
    }
}