How to make TableView Items draggable

portoist

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.

ustulation

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?

portoist

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 / 2

                            text: 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

ustulation

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)

portoist

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.0

Rectangle {
width: 360
height: 360

ListView{
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: true

Text {
 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.

ustulation

:) 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

portoist

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.

Jens

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

ustulation

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.

allopen

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]

ustulation

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.