कैसे खींचें और ड्रॉप घटना

Question

के बाद 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 दिखाया गया है, यह घटक मॉडल के अंदर है।

आप देख सकते हैं, ड्रॉप घटना के बाद, हर आइटम के लिए सूचकांक परिवर्तन नहीं करता है, और मॉडल के अंदर वस्तुओं के आदेश अभी भी एक ही है। ड्रैग और ड्रॉप ईवेंट होने के बाद सूची के नए ऑर्डर को पुनर्प्राप्त करने का कोई तरीका है?

Answer 1

आप 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 + "}"); 
}