Drag

Item{
width:50
height:50
anchors.left:parent.left
anchors.leftMargin:25
 
id:rectItem
Rectangle{
id:yellowBaseRect
anchors.fill:parent
color:"yellow"
radius:8
}
Rectangle{
id:yellowRect
anchors.fill:parent
color:"yellow"
radius:8
Drag.active:mouseArea.drag.active
Drag.dragType:Drag.Automatic
Drag.mimeData:{"text/plain":"yellow"}
MouseArea{
id:mouseArea
anchors.fill:parent
drag.target:parent
onPressed:parent.grabToImage(function(result){
parent.Drag.imageSource=result.url
})
onReleased:{
yellowRect.x=yellowBaseRect.x
yellowRect.y=yellowBaseRect.y
}
}
}
}

 

기존 Rectangle을 보존하기 위하여 동일한 위치에 동일한 Rectangle을 만든다 새로 만들어진 Rectangle을 이용하여 drag 이벤트를 진행한다.

Drag.active : mouseArea.drag.active drag이벤트를 활성하 시키고, dragType은 Drag.Automic를 설정한다.

Type은 None과 Internal, Automatic이 존재하는데 default값은 Internal 이다. Drag.Automatic을 사용할 경우 mimeData를 정의 해야 한다.

drag이벤트 발생시 추가적인 정보는 mimeData에 의해 전달된다.

 

Drop

Rectangle{
id:dropRect
anchors.top:parent.top
anchors.right:parent.right
width:200
height:parent.height
color:"white"
DropArea{
id:dragTarget
anchors.fill:parent
onEntered:{
console.log("onEntered")
}
onExited:{
console.log("onExited")
}
onDropped:
{
console.log("onDropped"+drop.text);
vardropColor=drop.text
dropRect.color=dropColor
}
}
}

 

drop 시 발생 되는 이벤트이다.

onEntered 이벤트는 drag된 아이템이 drop 지역에 들어왔을때 발생하게 된다.

onExited 이벤트는 drag된 아이템이 drop 지역에서 벗어날때 발생하게 된다.

onDropped 이벤트는 drag된 아이템을 drop지역에 drop 시켰을 시 발생하게 된다.

drag시 저장한 mimedata는 drop.text를 통하여 받을 수 있다.