ListView: move delegate to spot that is inside displayMarginBeginning scrolls content one delegate forward

I use drag and drop to move delegates. Using displayMarginBeginning/displayMarginEnd I can still see the delegates outside the ListView. When I drop a delegate on a delegate that is outside ListView, but (partly) inside the displayMarginBeginning, something goes wrong (lets call this delegate spot X).

It seems that the whole view gets moved. This can be seen in the "bug demo"-gif: moving to and from this spot X, the front of the list jumps one delegate forward.

If the cacheBuffer is not high enough (as it is in my current project), the dragged item will even be unloaded, which keeps the current drag.active state to true, and breaks my drag.active-dependent logic. The "bug delete drag demo"-gif demonstrates this unloading.

Note:

• as shown in the "bug demo"-gif: the problem does not happen in the displayMarginEnd-area
• triggering a move in DelegateModel, without making use of the DropAreas, also triggers this issue: the drag and drop feature does not seem to be the cause of the problem, just a method of pointing it out.
• I found this behavior also in earlier versions than 5.15.2

I tweaked the Qt drag-and-drop example code a bit to demonstrate:

• I added color to the ListElements to differentiate easier
• the content.border.color is now held-dependent instead of the content.color.
• there is a "lightsteelblue"-Rectangle showing the area used by the ListView, to show which delegates are inside the displayMarginBeginning-area

  // dynamicview.qml
  import QtQuick 2.15
  import QtQml.Models 2.1
  //![0]
  Rectangle {
      id: root
  
      width: 500; height: 200
  
      Component {
          id: dragDelegate
  
          MouseArea {
              id: dragArea
  
              property bool held: false
  
              width: 400
              height: 68
  
              drag.target: held ? content : undefined
              drag.axis: Drag.YAxis
  
              onPressAndHold: held = true
              onReleased: held = false
  
              Rectangle {
                  id: content
  //![0]
                  anchors {
                      horizontalCenter: parent.horizontalCenter
                      verticalCenter: parent.verticalCenter
                  }
                  width: dragArea.width; height: column.implicitHeight + 4
  
                  border.width: 3
                  border.color: dragArea.held ? "black" : "lightsteelblue"
  
                  color: cellColor
                  Behavior on color { ColorAnimation { duration: 100 } }
  
                  radius: 2
  //![1]
                  Drag.active: dragArea.held
                  Drag.source: dragArea
                  Drag.hotSpot.x: width / 2
                  Drag.hotSpot.y: height / 2
  //![1]
                  states: State {
                      when: dragArea.held
  
                      ParentChange { target: content; parent: root }
                      AnchorChanges {
                          target: content
                          anchors { horizontalCenter: undefined; verticalCenter: undefined }
                      }
                  }
  
                  Column {
                      id: column
                      anchors { fill: parent; margins: 2 }
  
                      Text { text: 'Name: ' + name }
                      Text { text: 'Type: ' + type }
                      Text { text: 'Age: ' + age }
                      Text { text: 'Size: ' + size }
                  }
  //![2]
              }
  //![3]
              DropArea {
                  anchors { fill: parent; margins: 10 }
  
                  onEntered: {
                      visualModel.items.move(
                              drag.source.DelegateModel.itemsIndex,
                              dragArea.DelegateModel.itemsIndex)
                  }
              }
  //![3]
          }
      }
  //![2]
  //![4]
      DelegateModel {
          id: visualModel
  
          model: PetsModel {}
          delegate: dragDelegate
      }
  
      ListView {
          id: view
  
          anchors.centerIn: parent
  
          height: 4 * 68 + 3 * spacing
          width: 500
          Rectangle { anchors.fill: parent; opacity: 0.2; color: "lightsteelblue" }
  
          model: visualModel
  
          spacing: 6
          cacheBuffer: 1000
          displayMarginBeginning: 500
          displayMarginEnd: 500
      }
  //![4]
  //![5]
  }
  //![5]
  

  // PetsModel.qml
  import QtQuick 2.0
  
  ListModel {
      ListElement {
          name: "Polly"
          type: "Parrot"
          age: 12
          size: "Small"
      }
      ListElement {
          name: "Penny"
          type: "Turtle"
          age: 4
          size: "Small"
      }
      ListElement {
          name: "Warren"
          type: "Rabbit"
          age: 2
          size: "Small"
      }
      ListElement {
          name: "Spot"
          type: "Dog"
          age: 9
          size: "Medium"
      }
      ListElement {
          name: "Schrödinger"
          type: "Cat"
          age: 2
          size: "Medium"
      }
      ListElement {
          name: "Joey"
          type: "Kangaroo"
          age: 1
          size: "Medium"
      }
      ListElement {
          name: "Kimba"
          type: "Bunny"
          age: 65
          size: "Large"
      }
      ListElement {
          name: "Rover"
          type: "Dog"
          age: 5
          size: "Large"
      }
      ListElement {
          name: "Tiny"
          type: "Elephant"
          age: 15
          size: "Large"
      }
  }