How to Create and Drag a Duplicate copy of Image from a listview?

Question

I have some number of images in a listview (QML). I want to drag the duplicate copy of each image present in the listview to the drop area just to show that I am dragging the image (the original image should be present there), and in the drop area I want the listview index of the same image.

Can anyone help me out? How should I drag the duplicate COPY of images or icon of that image without touching the original image in listvew?

Answer 1

You can create an invisible item, some template of the list item and after drag initialized assign the icon or image of the list item that should be dragged to this invisible item, then make it visible and draggable.

Some simplified example:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Shapes

Window {
    id: wnd
    visible: true
    width: 800
    height: 600

    Item {
        id: root
        anchors.fill: parent
        anchors.margins: 10

        RowLayout {
            anchors.fill: parent
            ListView {
                Layout.preferredWidth: parent.width / 2
                Layout.fillHeight: true
                model: 5
                delegate: Rectangle {
                    id: item
                    width: parent.width
                    height: 60
                    color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                    MouseArea {
                        id: area
                        anchors.fill: parent
                        onPressAndHold: {
                            var point = item.mapToItem(draggedObject.parent, 0, 0);
                            draggedObject.x = point.x;
                            draggedObject.y = point.y;
                            draggedObject.width = item.width;
                            draggedObject.height = item.height;
                            draggedObject.color = item.color;
                            draggedObject.visible = true;
                            area.drag.target = draggedObject;
                            draggedObject.Drag.active = true;
                        }
                        onReleased: {
                            if(dropArea.containsDrag)
                            {
                                dropRect.color = dropArea.drag.source.color;
                            }
                            draggedObject.visible = false;
                            draggedObject.Drag.active = false;
                        }
                    }
                }
            }
            Rectangle {
                id: dropRect
                Layout.preferredWidth: parent.width / 2
                Layout.fillHeight: true
                border.width: dropArea.containsDrag ? 3 : 1
                border.color: dropArea.containsDrag ? "red" : "#999"

                Text {
                    anchors.centerIn: parent
                    text: "Drop it here"
                }

                DropArea {
                    id: dropArea
                    anchors.fill: parent
                    onDropped: {
                        console.log(drop.drag.source);
                    }
                }
            }
        }

        Rectangle {
            id: draggedObject
            visible: false
            Text {
                anchors.centerIn: parent
                text: dropArea.containsDrag ? "Drop me" : "Drag me"
            }
        }
    }
}

Online test

I use here colors instead of icons to just make in simple. In this example the dragged item is always exists but invisible. In such manner you also can create this item using Dynamic Object Creation