Перетаскивание нескольких элементов в Qml

Question

Мне нужно нарисовать кучу Rectangles в моем приложении. Пользователь должен иметь возможность выбирать каждый из них индивидуально и свободно перемещать их и менять свое положение. Пользователь также должен иметь возможность выбирать несколько прямоугольников и одновременно перемещать все выбранные и отпускать их в другом месте. Я уже мог реализовать что-то, основанное на Gridview, которое может обрабатывать выбор и перемещение одного прямоугольника, но я не могу заставить его работать для множественного выбора/перемещения. Вот фрагмент кода, который у меня есть на данный момент:

GridView { 
     id: mainGrid 
     cellWidth: 7; 
     cellHeight: 7; 

     ListModel { 
      id: myModel 
      function createModel() { 
       for(var i = 0; i < totalZoneList.length; i++) 
       { 
        for (var j = 0; j < moduleZoneList.length; j++) 
        { 
         myModel.append({"item1": ITEM1, "item2": ITEM2}) 
        } 
       } 
      } 
      Component.onCompleted: {createModel()} 
     } 

     Component { 
      id: myblocks 
      Item { 
       id: item 
       width: mainGrid.cellWidth; 
       height: mainGrid.cellHeight; 
       Rectangle { 
        id: box 
        parent: mainGrid 
        x: //CALCULATED BASED ON MODEL 
        y: //CALCULATED BASED ON MODEL 
        width: //CALCULATED BASED ON MODEL 
        height: //CALCULATED BASED ON MODEL 


        MouseArea { 
         id: gridArea 
         anchors.fill: parent 
         hoverEnabled: true 
         drag.axis: Drag.XandYAxis 
         drag.minimumX: 0 
         drag.minimumY: 0 


         property int mX: (mouseX < 0) ? 0 : ((mouseX < mainGrid.width - mainGrid.cellWidth) ? mouseX : mainGrid.width - mainGrid.cellWidth) 
         property int mY: (mouseY < 0) ? 0 : ((mouseY < mainGrid.height - mainGrid.cellHeight) ? mouseY : mainGrid.height - mainGrid.cellHeight) 
         property int index: parseInt(mX/mainGrid.cellWidth) + 5*parseInt(mY/mainGrid.cellHeight) //item underneath cursor 
         property int activeIndex 
         property var xWhenPressed 
         property var yWhenPressed 
         propagateComposedEvents: true 

         onPressed: { 
          activeIndex = index 
          drag.target = box 
          xWhenPressed = box.x 
          yWhenPressed = box.y 

          gridArea.drag.maximumX = mainGrid.width - box.width 
          gridArea.drag.maximumY = mainGrid.height - box.height 
         } 
         onReleased: { 
          if(xWhenPressed !== box.x || yWhenPressed !== box.y) 
          { 
           //RECALCULATE THE POSITION 
          } 
         } 
         onPositionChanged: { 
          if (drag.active && index !== -1 && index !== activeIndex) { 
                  mainGrid.model.move(activeIndex, activeIndex = index, 1) 
          } 
         } 
        } // Mousearea 
       } // Rectangle 
      } // Item 
     } // Component 

    } //mainGrid 

Answer 1

Мне не удалось заставить ваш код работать. Во-первых, я вижу ошибки на нем:

Rectangle { 
    id: box 
    parent: mainGrid 
... 
} 

вам просто нужно удалить родительский Item, который не имеет смысла, и установить Rectangle как корень делегата.

Тогда, вы забыли упомянуть, что цель сопротивления является Rectangle

drag.target: parent 

Вот код после исправления:

Component { 
    id: myblocks 

    Rectangle { 
     id: box 
     color: "red" 
     width: 20 
     height: 20 

     MouseArea { 
      id: gridArea 
      anchors.fill: parent 
      drag.target: parent 
      hoverEnabled: true 
      drag.axis: Drag.XandYAxis 
     } // Mousearea 
    } // Rectangle 
} // Component 

Затем, вы не должны использовать GridView, потому что вы хотите, чтобы элементы были перемещены. Если вы используете Repeater, он работает, и вам просто нужно установить x и y в Rectangle, чтобы поместить элементы в начале.

Теперь это решение проблемы: вы нажимаете на элемент, чтобы выбрать его, и вы можете перемещать все выбранные элементы одновременно.

Window { 
    visible: true 
    width: 640 
    height: 480 

    property var totalZoneList: ["total1", "total2"] 
    property var moduleZoneList: ["module1", "module2"] 

    Repeater{ 
     id: iRepeater 
     model: ListModel { 
        id: myModel 
        function createModel() { 
         for(var i = 0; i < totalZoneList.length; i++) 
         { 
          for (var j = 0; j < moduleZoneList.length; j++) 
          { 
           myModel.append({"item1": totalZoneList[i], "item2": moduleZoneList[j]}) 
          } 
         } 
        } 
        Component.onCompleted: {createModel()} 
       } 
     delegate: myblocks 

    } 

    Component { 
     id: myblocks 

     Rectangle { 
      id: box 
      color: { 
       switch(index){ 
       case 0: selected ? "red" : "#FF9999";break; 
       case 1: selected ? "blue" : "lightblue";break; 
       case 2: selected ? "green" : "lightgreen";break; 
       case 3: selected ? "grey" : "lightgrey";break; 
       } 
      } 
      x: (width + 5)*index 

      width: 20 
      height: 20 
      property int offsetX:0 
      property int offsetY:0 
      property bool selected: false 
      function setRelative(pressedRect){ 
       disableDrag(); 
       x = Qt.binding(function(){ return pressedRect.x + offsetX; }) 
       y = Qt.binding(function(){ return pressedRect.y + offsetY; }) 
      } 
      function enableDrag(){ 
       gridArea.drag.target = box 
      } 
      function disableDrag(){ 
       gridArea.drag.target = null 
      } 

      MouseArea { 
       id: gridArea 
       anchors.fill: parent 
       hoverEnabled: true 
       drag.axis: Drag.XandYAxis 
       onClicked: parent.selected=!parent.selected 

       onPressed: { 

        var pressedRect = iRepeater.itemAt(index); 
        if (pressedRect.selected == true){ 
         for (var i=0; i<iRepeater.count; i++){ 
          var rect = iRepeater.itemAt(i); 
          if (i != index){ 
           //init for breaking existing binding 
           rect.x = rect.x 
           rect.y = rect.y 
           rect.disableDrag() 
           if (rect.selected == true){ 
            rect.offsetX = rect.x - pressedRect.x 
            rect.offsetY = rect.y - pressedRect.y 
            rect.setRelative(pressedRect) 
           } 
          } 
         } 
         pressedRect.enableDrag() 
        } 
       } 
      } // Mousearea 
     } // Rectangle 
    } // Component 
} 

Answer 2

Рецепт один:

1. Используйте Repeater, поэтому позиционирование определяется не видом, но самостоятельно.

2. Использование невидимого помощника Item. Это ваш номер drag.target.

3. Реализуйте свой предпочтительный способ выбора объектов - погоду, щелкнув мышью или рисовать окна и проверив, какие объекты включены в это поле. Сделайте позиции всех выбранных объектов относительно вашего невидимого вспомогательного объекта.

4. Перетащите вспомогательный объект и переместите все остальные объекты соответствующим образом.

5. Когда закончите, отмените объекты снова и сделать их позиции абсолютного (в пределах родителей системы координат)

Рецепт второй:

1. Reparent все выбранные объекты в новый пункт, при отображении их координат соответственно

2. Переместить новый товар

3. Поднимите все предметы обратно на исходный холст, скопировав их координаты назад.

---

Я надеюсь, что это достаточно, чтобы решить вашу проблему (насколько я понял) Если он решает другую проблему, чем вы должны быть более конкретными об ожидаемом поведении ваших потащили объекты.