Drag and Drop within a ListView or a Column

[jc-denton]

I wanted to create a simple list of buttons that the user can reorder by dragging them with the mouse. Looking at the drag and drop example with the GridView [1] I first tried to recreate it using a simple Column with a repeater and a model, but I never got it working. Since the example uses a view I then tried with ListView, here is what I ended up with:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQml.Models 2.2

Window {
  id: root
  visible: true

  width: 100
  height: 200

  DelegateModel {
    id: visualModel

    model: ListModel {
      id: model
      ListElement { name: "red"; value: "#f00" }
      ListElement { name: "green"; value: "#0f0" }
      ListElement { name: "blue"; value: "#00f" }
    }

    delegate: MouseArea {
      id: mouseArea
      property int visualIndex: DelegateModel.itemsIndex

      width: 80
      height: 20

      hoverEnabled: true
      drag.target: rect

      Rectangle {
        id: rect

        radius: 6
        width: 78
        height: 18
        color: model.value

        Drag.active: mouseArea.drag.active
        Drag.source: mouseArea
        Drag.hotSpot.x: width / 2
        Drag.hotSpot.y: height / 2

      }

      DropArea {

        anchors {
          fill: parent
        }

        onEntered: {
          var from = drag.source.visualIndex
          var to = mouseArea.visualIndex
          console.log("From " + from + " to " + to)
          visualModel.items.move(from, to)
        }
      }
    }
  }

  ListView {

    id: list

    anchors {
      centerIn: parent
      fill: parent
    }

    interactive: false

    displaced: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
    }

    model: visualModel
  }
}

It works, but does not reposition the item dragged by the user after releasing the mouse button. So here are my two questions:

• Is it possible to implement rearranging by drag and drop within a simple Column? If not what differs the different Views from the Row / Column items so that they can work with drag and drop?

• I could not figure out why after releasing the rectangles are automatically repositioned in the grid in the Qt example: If you drag a rectangle just away from the others and not on another rectangle onEntered is called on the same Drop are to which the Rectangle belongs. This also happens in my code, but the Item does not get repositioned afterwards, why?

[1] http://doc.qt.io/qt-5/qtquick-draganddrop-example.html