How to make TableView Items draggable
-
I've a TableView and have implemented my own item delegate for it. I want to be able to drag it out and place it somewhere else. How do I do it
@itemDelegate: Text {
id: objMainText
anchors.horizontalCenter: parent.horizontalCenterelide: styleData.elideMode color: "yellow" text: styleData.value.get(0).content //assume this is correct MouseArea { id: objDragArea anchors.fill: parent drag.target: objDragableText drag.axis: Drag.XAndYAxis hoverEnabled: true onEntered: { console.log("Hover Captured") //This gets printed } onPressed: { console.log("Detected") //This NEVER gets printed } Text { id: objDragableText anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter Drag.active: objDragArea.drag.active opacity: Drag.active / 2 text: objMainText.text color: objMainText.color states: State { when: { objDragArea.drag.active } AnchorChanges { anchors.horizontalCenter: undefined anchors.verticalCenter: undefined } } }@Don't mind if there are a few brackets less here and there. Those I'm taking care of ofcourse. But why can't I drag objDragableText and how do i do it?
Also, onClicked is captured as in the comments above but not onPressed. How do I also do this? -
From "here":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#drag.target-prop:
Note: Items cannot be dragged if they are anchored for the requested drag.axis. For example, if anchors.left or anchors.right was set for rect in the above example, it cannot be dragged along the X-axis. This can be avoided by settng the anchor value to undefined in an onPressed handler. -
If you look at the example I've given, I actually do that (look at AnchorChanges at the end).
width and height of objDragableText are however missing, but it does not work even if i give one.
Btw i do know how to implement drag-drop. Only in this context I'm failing.
Could you please point out why? -
Well if I take your example and change objDragableText like this:
@
Text {
id: objDragableText
anchors.verticalCenter: parent.verticalCenter
//anchors.horizontalCenter: parent.horizontalCenter
x:0
Drag.active: objDragArea.drag.active
opacity: Drag.active / 2text: objMainText.text color: objMainText.color states: State { when: { objDragArea.drag.active } AnchorChanges { anchors.horizontalCenter: undefined anchors.verticalCenter: undefined } }@
Than I am able to drag it on X axis -
are you using it inside TableView's itemDelegate (as the topic title suggests)? If so can you please post your complete code? (if you want i can post mine but the gist is already there in itemDelegate: written above)
-
I don't have QtQuick Controls installed right now, I'v been testing it with ListView, so it is possible that TableView treats its delegate differently...here is my code:
@
import QtQuick 2.0Rectangle {
width: 360
height: 360ListView{
anchors.fill: parent
model:[
{prop:"item1"},
{prop:"item2"},
]delegate: Text{
id: objMainText
text: modelData.prop
font.pixelSize: 24
MouseArea {
id: objDragArea
anchors.horizontalCenter: parent.horizontalCenter
anchors.fill: parent
drag.target: objDragableText
drag.axis: Drag.XAndYAxis
hoverEnabled: trueText { id: objDragableText Drag.active: objDragArea.drag.active opacity: Drag.active / 2 x:0; y: 0 font.pixelSize: objMainText.font.pixelSize text: objMainText.text color: objMainText.color states: State { when: { objDragArea.drag.active } AnchorChanges { anchors.horizontalCenter: undefined anchors.verticalCenter: undefined } } }}
}
}
}
@
I am able to grab texts and drag them around. -
:) ListView is too simple. MouseArea that you put is directly accessible to you..you can do whatever you want. That's why the title clearly mentions "TableView". If you use TableView the mouseArea you put in itemDelegate is not the topmost mouse area. I suspect TableView adds a mouseArea on top of it which is why in the comments in the code i put in the question i mention that onClicked (being a composed event) is captured by the mouseArea while onPressed (which i think is necessary for the drag to take effect) is not even passed to my mouseArea by the one which TableView screens mine with. This is all my guess though, and hence the question.
So the question is still the same "How to make TableView Items draggable" - refer to my 1st post in this thread
-
Well then sorry that I wasn't able to help you:-) Here is the "source":http://qt.gitorious.org/qt/qtquickcontrols/blobs/stable/src/controls/TableView.qml of TableView, maybe digging in that will help.
-
I should mention that we have improved on this for TableView already in QT 5.1.1 so perhaps you should simply wait a little bit.
"https://bugreports.qt-project.org/browse/QTBUG-31206":https://bugreports.qt-project.org/browse/QTBUG-31206 for details
-
Thrilled to hear from you Jens :) Read a lot of posts from you and seen your qml tutorial videos. I've started on a new Desktop project and have proposed qt-quick (it's new to me and the whole team) for it and hence using it. So I would have lot of questions.
Presently I've just added
@mouse.accepted = false@
in the onPressed handler of MouseArea of ListView in the implementation of TableView.qml and things are working fine for me.
-
Do you implement DnD of TableView in Qt5.1.0 successfully? Can you explain it? thank you very much!
[quote author="ustulation" date="1373016909"]Thrilled to hear from you Jens :) Read a lot of posts from you and seen your qml tutorial videos. I've started on a new Desktop project and have proposed qt-quick (it's new to me and the whole team) for it and hence using it. So I would have lot of questions.
Presently I've just added
@mouse.accepted = false@
in the onPressed handler of MouseArea of ListView in the implementation of TableView.qml and things are working fine for me.[/quote]
-
It's right there in the post that you've quoted - go to TableView.qml {just write TableView {} and control-click on it and go or whatever} and add that line at the place mentioned. That was all a month back though - now deep into the project with the kind of complexity and customization that is needed for our desktop application we are dedicating some time for building most of the stuffs from scratch - Table/Tree views inclusive.