I have a menu with grouped components (qtreeview). I want to drag them into another treeview.

I have the following (menu) treeview

Qt Code: 
  1. TreeView {
  2.      id: menuView
  3.      Layout.minimumWidth: 50
  4.      Layout.fillHeight: true
  5.      rowDelegate: Item {
  6.           height: 30
  7.      }
  8.      height: parent.height
  9.      property int dragItemIndex: -1
  10.      itemDelegate:  dndDelegate
  11.      model: myModel
  12.      onCurrentIndexChanged: console.log("current index", currentIndex)
  13.      TableViewColumn {
  14.           title: "Name"
  15.           resizable: false
  16.      }
  17.  }
  18.  
  19. /*Delegate for displaying treeview item*/
  20. Component  {
  21.      id: dndDelegate
  22.      Item {
  23.           DraggableArea{}
  24.      }
  25. }
  26.  
  27. /*Draggable area*/
  28. MouseArea {
  29.     id:mouseArea
  30.     onPressed: Code.startDrag(mouse);
  31.     onPositionChanged: Code.continueDrag(mouse);
  32.     onReleased: Code.endDrag(mouse)
  33.     anchors { left: parent.left; right: parent.right }
  34.     height: dragRect.height
  35.     width:dragRect.width
  36.     drag.target: dragRect
  37.     Rectangle {
  38.         id: dragRect
  39.  
  40.         Image {
  41.             id: menuItemImage
  42.             anchors.leftMargin: 5
  43.             anchors.left:parent.left // set anchor to be able to set margin
  44.             anchors.verticalCenter:parent.verticalCenter
  45.             source:model ? model.CommandIcon:""
  46.         }
  47.         Text {
  48.             anchors.left:menuItemImage.right
  49.             anchors.verticalCenter:parent.verticalCenter
  50.             text:model ? model.CommandTitle:""
  51.             anchors.leftMargin: 5
  52.             font.pixelSize: 14
  53.         }
  54.  
  55.         width: menuView.width - 50
  56.         color: "red"
  57.         border.color: "black"
  58.         border.width: 2
  59.         radius: 4
  60.         height: 27
  61.  
  62.     }
  63. }
To copy to clipboard, switch view to plain text mode 

and the javascript code to drag by copying the items
Qt Code: 
  1. var itemComponent = null;
  2. var draggedItem = null;
  3. var startingMouse;
  4. var posnInWindow;
  5.  
  6. function startDrag(mouse)
  7. {
  8.     posnInWindow = dragRect.mapToItem(root, 0, 0);
  9.     console.debug("posnInWindow: "+ posnInWindow.x + " " + posnInWindow.y);
  10.     startingMouse = { x: mouse.x, y: mouse.y }
  11.     console.debug("startingMouse: "+ startingMouse.x + " " + startingMouse.y);
  12.     loadComponent();
  13. }
  14.  
  15. //Creation is split into two functions due to an asynchronous wait while
  16. //possible external files are loaded.
  17.  
  18. function loadComponent() {
  19.     if (itemComponent != null) { // component has been previously loaded
  20.         createItem();
  21.         return;
  22.     }
  23.  
  24.     itemComponent = Qt.createComponent("../DraggableArea.qml");
  25.     if (itemComponent.status == Component.Loading)  //Depending on the content, it can be ready or error immediately
  26.         component.statusChanged.connect(createItem);
  27.     else
  28.         createItem();
  29. }
  30.  
  31. function createItem() {
  32.     if (itemComponent.status == Component.Ready && draggedItem == null) {
  33.         draggedItem = itemComponent.createObject(root, {"x": 40,
  34.                                                      "y": posnInWindow.y});
  35.  
  36.         draggedItem.anchors.left = undefined;
  37.         draggedItem.anchors.right = undefined;
  38.         console.debug("draggedItem created: "+ draggedItem.x + " " + draggedItem.y);
  39.         // make sure created item is above the ground layer
  40.     }
  41.     else if (itemComponent.status == Component.Error) {
  42.         draggedItem = null;
  43.         console.log("error creating component");
  44.         console.log(itemComponent.errorString());
  45.     }
  46. }
  47.  
  48. function continueDrag(mouse)
  49. {
  50.     if (draggedItem == null)
  51.         return;
  52.  
  53.     draggedItem.x = mouse.x + posnInWindow.x - startingMouse.x;
  54.     draggedItem.y = mouse.y + posnInWindow.y - startingMouse.y;
  55.  
  56.     //console.debug("mouse: "+ mouse.x + " " + mouse.y);
  57.     //console.debug("posnInWindow: "+ posnInWindow.x + " " + posnInWindow.y);
  58.     //console.debug("startingMouse: "+ startingMouse.x + " " + startingMouse.y);
  59.     //console.debug("draggedItem: "+ draggedItem.x + " " + draggedItem.y);
  60. }
  61.  
  62. function endDrag(mouse)
  63. {
  64.     draggedItem.destroy();
  65.     /*if (draggedItem == null)
  66.         return;
  67.  
  68.     if (draggedItem.y < toolbox.height) { //Don't drop it in the toolbox
  69.         draggedItem.destroy();
  70.         draggedItem = null;
  71.     } else {
  72.         draggedItem.created = true;
  73.         draggedItem = null;
  74.     }*/
  75.     draggedItem = null;
  76.     //draggedItem.created = true;
  77. }
To copy to clipboard, switch view to plain text mode 

The problem is that these dynamically created items aren't perceived as draggable (I just emulate dragging changing coordinates in JS). How to do it right, like it works in QTreeView approach? Setting drag.target for newly created object doesn't seem to work (get an exception)