Перетаскиваемые элементы, не работающие в QML

Question

Я пытаюсь реализовать базовое drag n 'drop в QML. Функционально это работает - я могу перетащить строку вокруг. Тем не менее, я не могу заставить свой draggable Rectangle объект следовать курсору. Он устанавливает x и y Rectangle правильно, что он становится видимым, но затем он остается неподвижным, а не перемещается мышью. Вот мой код:

MouseArea { 
    id: mouseArea 
    anchors.fill: parent 
    drag.target: draggable 
} 

Rectangle { 
    id: draggable 
    height: 18 
    width: dragText.width + 8 
    clip: true 
    color: "#ff333333" 
    border.width: 2 
    border.color: "#ffaaaaaa" 
    visible: false 
    anchors.verticalCenter: parent.verticalCenter 
    anchors.horizontalCenter: parent.horizontalCenter 

    Drag.active: mouseArea.drag.active 
    Drag.hotSpot.x: 0 
    Drag.hotSpot.y: 0 
    Drag.mimeData: { "text/plain": "Teststring" } 
    Drag.dragType: Drag.Automatic 
    Drag.onDragStarted: { 
     visible = true 
    } 
    Drag.onDragFinished: { 
     visible = false 
    } 

    Text { 
     id: dragText 
     x: 4 
     text: "Teststring" 
     font.weight: Font.Bold 
     color: "#ffffffff" 
     horizontalAlignment: Text.AlignHCenter 
    } 
} 

Answer 1

Я в конечном итоге решил это, полностью избегая рамки Draggable и в основном используя обходные пути. Я добавил следующее к моему MouseArea сделать прямоугольник двигаться правильно:

onMouseXChanged: { 
    draggable.x = mouseX - draggable.width/2 
} 
onMouseYChanged: { 
    draggable.y = mouseY - draggable.height/2 
} 

Для имитации падения функциональности, я программно вычислить положение «капельно области», сравнить его с положением мыши с рудиментарным обнаружения столкновений, а затем добавьте в ListView, который прикреплен к области «drop».

Answer 2

Ваш прямоугольник не перемещается, потому что вы устанавливаете привязки к вашему прямоугольнику. Анкеры предназначены для установки на неподвижную точку крепления.

Удалить

anchors.verticalCenter: parent.verticalCenter 
anchors.horizontalCenter: parent.horizontalCenter 

в вашем QML.

Если вы хотите разместить его в центре родителя, вам нужно будет установить его, как это вместо:

x: parent.width/2 - this.width/2 
y: parent.height/2 - this.height/2 

Вы также можете удалить

Drag.dragType: Drag.Automatic 

если прямоугольник должен следовать за вашим курсором, а не только двигаться, после того, как сопротивление закончилось.