创建可拖动的动态项目

时间:2015-07-09 20:06:28

标签: qml qtquick2 qtreeview

我有一个包含分组组件的菜单(qtreeview)。我想将它们拖到另一个树视图中。

树视图

    TreeView {
         id: menuView
         Layout.minimumWidth: 50
         Layout.fillHeight: true
         rowDelegate: Item {
              height: 30
         }
         height: parent.height
         property int dragItemIndex: -1
         itemDelegate:  dndDelegate
         model: myModel
         onCurrentIndexChanged: console.log("current index", currentIndex)
         TableViewColumn {
              title: "Name"
              resizable: false
         }
     }

    /*Delegate for displaying treeview item*/
    Component  {
         id: dndDelegate
         Item {
              DraggableArea{}
         }
    }

    /*Draggable area*/
    MouseArea {
        id:mouseArea
        onPressed: Code.startDrag(mouse);
        onPositionChanged: Code.continueDrag(mouse);
        onReleased: Code.endDrag(mouse)
        anchors { left: parent.left; right: parent.right }
        height: dragRect.height
        width:dragRect.width
        drag.target: dragRect
        Rectangle {
            id: dragRect

            Image {
                id: menuItemImage
                anchors.leftMargin: 5
                anchors.left:parent.left // set anchor to be able to set margin
                anchors.verticalCenter:parent.verticalCenter
                source:model ? model.CommandIcon:""
            }
            Text {
                anchors.left:menuItemImage.right
                anchors.verticalCenter:parent.verticalCenter
                text:model ? model.CommandTitle:""
                anchors.leftMargin: 5
                font.pixelSize: 14
            }

            width: menuView.width - 50
            color: "red"
            border.color: "black"
            border.width: 2
            radius: 4
            height: 27

        }
    }

以及通过复制项目来拖动的javascript代码

var itemComponent = null;
var draggedItem = null;
var startingMouse;
var posnInWindow;

function startDrag(mouse)
{
    posnInWindow = dragRect.mapToItem(root, 0, 0);
    console.debug("posnInWindow: "+ posnInWindow.x + " " + posnInWindow.y);
    startingMouse = { x: mouse.x, y: mouse.y }
    console.debug("startingMouse: "+ startingMouse.x + " " + startingMouse.y);
    loadComponent();
}

//Creation is split into two functions due to an asynchronous wait while
//possible external files are loaded.

function loadComponent() {
    if (itemComponent != null) { // component has been previously loaded
        createItem();
        return;
    }

    itemComponent = Qt.createComponent("../DraggableArea.qml");
    if (itemComponent.status == Component.Loading)  //Depending on the content, it can be ready or error immediately
        component.statusChanged.connect(createItem);
    else
        createItem();
}

function createItem() {
    if (itemComponent.status == Component.Ready && draggedItem == null) {
        draggedItem = itemComponent.createObject(root, {"x": 40,
                                                     "y": posnInWindow.y});

        draggedItem.anchors.left = undefined;
        draggedItem.anchors.right = undefined;
        console.debug("draggedItem created: "+ draggedItem.x + " " + draggedItem.y);
        // make sure created item is above the ground layer
    }
    else if (itemComponent.status == Component.Error) {
        draggedItem = null;
        console.log("error creating component");
        console.log(itemComponent.errorString());
    }
}

function continueDrag(mouse)
{
    if (draggedItem == null)
        return;

    draggedItem.x = mouse.x + posnInWindow.x - startingMouse.x;
    draggedItem.y = mouse.y + posnInWindow.y - startingMouse.y;

    //console.debug("mouse: "+ mouse.x + " " + mouse.y);
    //console.debug("posnInWindow: "+ posnInWindow.x + " " + posnInWindow.y);
    //console.debug("startingMouse: "+ startingMouse.x + " " + startingMouse.y);
    //console.debug("draggedItem: "+ draggedItem.x + " " + draggedItem.y);
}

function endDrag(mouse)
{
    draggedItem.destroy();
    draggedItem = null;
}

问题是这些动态创建的项目不被认为是可拖动的(我只是模仿在JS中拖动更改坐标)。如何做到正确,就像它在QTreeView方法中工作一样?为新创建的对象设置 drag.target 似乎不起作用(获得例外)

0 个答案:

没有答案