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

                        elide: 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 / 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



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



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.