如何拖放事件

后取回里面的ListView的ListModel的新的有序列表我有这个简单的QML代码如何拖放事件

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Layouts 1.0 
import QtQml.Models 2.2 

ApplicationWindow { 
    visible: true 
    width: 300 
    height: 120 
    title: qsTr("Hello World") 
    Rectangle { 
     anchors.fill: parent; 

     ListView{ 
      id: timeline 
      anchors.fill: parent 
      orientation: ListView.Horizontal 
      model: visualModel 
      delegate: timelineDelegate 

      moveDisplaced: Transition { 
       NumberAnimation{ 
        properties: "x,y" 
        duration: 200 
       } 
      } 

      DelegateModel { 
       id: visualModel 
       model: timelineModel 
       delegate: timelineDelegate 
      } 

      Component { 
       id: timelineDelegate 


       MouseArea { 
        id: dragArea 

        width: 100; height: 100 

        property bool held: false 

        drag.target: held ? content : undefined 
        drag.axis: Drag.XAxis 

        onPressAndHold: held = true 
        onReleased: { 
         held = false 
         var listOnModel = "{"; 
         for(var i = 0; i < timelineModel.count; i++){ 
          listOnModel += timelineModel.get(i).colore + ", " 
         } 
         console.log("List: " + listOnModel + "}"); 
        } 

        Rectangle { 
         id: content 

         anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } 
         width: 100 
         height: 100 

         color: colore 
         opacity: dragArea.held ? 0.8 : 1.0 

         Text{ 
          anchors.verticalCenter: parent.verticalCenter 
          anchors.horizontalCenter: parent.horizontalCenter 
          text: index 
          font.pixelSize: 20 
         } 

         Drag.active: dragArea.held 
         Drag.source: dragArea 
         Drag.hotSpot.x: width/2 
         Drag.hotSpot.y: height/2 

         states: State{ 
          when: dragArea.held 
          ParentChange { target: content; parent: timeline } 
          AnchorChanges { 
           target: content 
           anchors { horizontalCenter: undefined; verticalCenter: undefined } 
          } 
         } 
        } 

        DropArea { 
         anchors.fill: parent 
         onEntered: { 
          visualModel.items.move(drag.source.DelegateModel.itemsIndex, dragArea.DelegateModel.itemsIndex); 
         } 

        } 
       } 
      } 

      ListModel { 
       id: timelineModel 
       // @disable-check M16 
       ListElement { colore: "blue" } 
       // @disable-check M16 
       ListElement { colore: "orange" } 
       // @disable-check M16 
       ListElement { colore: "green" } 
      } 
     } 
    } 
}

在这里，我们有有色拖动矩形的一个简单的列表。在每个矩形的中心显示实际的index，该组件在模型内部。

正如你所看到的，下降事件之后，对每一个项目的索引不改变，模型内的项目的顺序仍然是相同的。是否有办法在发生拖放事件后检索列表的新顺序？

来源

2016-12-06 Elia

您不重新订购ListModel，而是DelegateModel的items。因此您需要使用此代码：

onReleased: { 
    held = false 
    var listOnModel = "{"; 
    for(var i = 0; i < visualModel.items.count; i++){ 
     listOnModel += visualModel.items.get(i).model.colore + ", " 
    } 
    console.log("List: " + listOnModel + "}"); 
}

来源

2016-12-06 10:35:13 derM

如何拖放事件

回答

相关问题