Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] QML and Drag and Drop
Forum Updated to NodeBB v4.3 + New Features

[Solved] QML and Drag and Drop

Scheduled Pinned Locked Moved QML and Qt Quick
42 Posts 8 Posters 38.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    Deqing
    wrote on last edited by
    #25

    Had tried setting x,y in model for image to display, but looks like it is not working.

    I guess the reason is in this case Grid index is not matching correct image, say a 2*3 grid:

    ID of GridView
    0 1 2
    3 4 5

    Images displayed in self-defined position
    4 5 1
    0 2 3

    When clicking at the top-left item, we'd like to pick image 4, but grid.at(index) will return 0 for us.

    1 Reply Last reply
    0
    • X Offline
      X Offline
      xsacha
      wrote on last edited by
      #26

      Oh, I see what you mean.

      Well the code I have in the wiki does exactly this.

      All you need to do is save the model in to either:

      1. QML file (overwrite the existing one on the fly)
      2. QSettings file (do the model positions inside QSettings object).

      The gridIDs are irrelevant. You can use gridId=843423 if you want. It's just a reference point.
      The only thing that matters is the order of the ListElements inside the ListModel.

      However, in saying this, if you keep the gridIDs as is and save the final gridIDs in to a QSettings object (uses less space/quicker to load), then you can simply use 'move' commands at runtime to sort them in to the correct order. It's another option.

      Since you said you are loading the model via a C++ backend, it only makes sense to load the model in the order you want. This solves your problem.

      • Sacha
      1 Reply Last reply
      0
      • D Offline
        D Offline
        Deqing
        wrote on last edited by
        #27

        Thanks. I will try it in my C++ code.

        Another concern is about flickable. Sometimes user would like to flick the page when they have a lot of icons that displayed out of the screen. GridView have this feature by setting 'interactive' to true. However if we reparent items out of the GridView, these items will lost this feature.

        Actually I tried to comment out reparenting code, IconItem.qml like this:
        @
        Component {
        // Rectangle {
        // id: main
        // width: grid.cellWidth; height: grid.cellHeight
        // opacity: 0.5
        Image {
        id: item//; parent: loc
        width: grid.cellWidth; height: grid.cellHeight
        @

        In this code icon can be rearranged inside the GridView somehow, but grid failed to find correct index underneath cursor(don't know why)

        Is it possible to add flickable back to the GridView?

        1 Reply Last reply
        0
        • X Offline
          X Offline
          xsacha
          wrote on last edited by
          #28

          I only set interactive to false because it makes it easier to demo and you won't accidently flick the grid. It was unnecessary with only a 3x3 grid.

          If you want to set interactive to true, just remember to use contentX and/or (depending on flickable direction) contentY to get the position within the flickable (GridView) item.

          Example:
          @y: main.y - grid.contentY + 5@

          Note: You'll also have to make sure the grid doesn't flick while you are moving an icon.
          @interactive: loc.currentId == -1@

          With these two lines, it is working perfect with flickable here.

          Edit: You may get some extraordinary lagg and weird effects with flickable. You need to modify Behavior on x and y, with this:
          @ enabled: loc.currentId != -1 && item.state != "active"@

          • Sacha
          1 Reply Last reply
          0
          • D Offline
            D Offline
            Deqing
            wrote on last edited by
            #29

            Gosh! It works perfectly.
            Thank you Sacha.

            1 Reply Last reply
            0
            • D Offline
              D Offline
              Deqing
              wrote on last edited by
              #30

              Hi Sacha, just found an issue about reparenting item. If beginResetModel()/endResetModel() called, icons will failed to be erased when moving.

              Sometimes icons could be updated with new data, so I need to reset model to refresh icons. New images can be displayed out but they can't be erased anymore.

              Any ideas how to fix this? Thanks in advance!

              1 Reply Last reply
              0
              • X Offline
                X Offline
                xsacha
                wrote on last edited by
                #31

                Yeah, if you re-parent the icons, any action on the gridView won't affect them any more (even destroying the grid view!).
                So what you need to do is:

                1. Re-parent back to gridView
                2. beginResetModel()/endResetModel() or other actions
                3. Re-parent back to loc/screen

                You can think of this as two states. Its parent should be 'loc' (or screen) when it is in a moving state because you want animations. Its parent should be the gridView when it is in a modification state (reseting model/destroying gridView or whatever else you need to do).

                • Sacha
                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  Deqing
                  wrote on last edited by
                  #32

                  Cool! I solved it by simply moving "parent: loc" into the state "active".

                  Thanks a lot!

                  1 Reply Last reply
                  0
                  • K Offline
                    K Offline
                    kyleplattner
                    wrote on last edited by
                    #33

                    Just a followup question: How can I persist the drag and dropped location so that when the user navigates away from the page and returns the arrangement that the user chose is still present.

                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      Deqing
                      wrote on last edited by
                      #34

                      I guess you need to store the locations in the model.

                      1 Reply Last reply
                      0
                      • K Offline
                        K Offline
                        kyleplattner
                        wrote on last edited by
                        #35

                        I do need to keep the locations of the dragged items. What would be the best way to accomplish this?

                        1 Reply Last reply
                        0
                        • D Offline
                          D Offline
                          Deqing
                          wrote on last edited by
                          #36

                          I'm using C++ data model and store items in a list.

                          When drag-and-drop finishes, I will not only move items in the GridView, but also move them inside the list in C++ code at the same time.

                          1 Reply Last reply
                          0
                          • S Offline
                            S Offline
                            sfjam
                            wrote on last edited by
                            #37

                            this can work in one screen,but when i scroll the screen,this does not work,how to change it

                            1 Reply Last reply
                            0
                            • X Offline
                              X Offline
                              xsacha
                              wrote on last edited by
                              #38

                              Hi sfjam. Can you elaborate on your issue?

                              Are you scrolling to a second GridView or scrolling within the GridView?

                              My solution for scrolling within a GridView is on the previous page (fourth comment from bottom).

                              If you want multiple GridViews, the code gets more complex. Post back if this is what you desire (multi-grid draggable icon layout).

                              • Sacha
                              1 Reply Last reply
                              0
                              • F Offline
                                F Offline
                                fonzi337
                                wrote on last edited by
                                #39

                                Wow, thanks xsacha for putting this together! It's amazing how little code is involved to get such nice complex-looking behavior. :)

                                I suggest a small tweak to the code: it looks like if an item at a lower index is in the active state and is moved towards an item of a higher index in the model, the active item is drawn behind the item with the higher model index. Setting the z value of the active item in the state PropertyChanges definition should do the trick:

                                @PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5; z: 500 }@

                                1 Reply Last reply
                                0
                                • X Offline
                                  X Offline
                                  xsacha
                                  wrote on last edited by
                                  #40

                                  Thanks, I'll add that :)

                                  • Sacha
                                  1 Reply Last reply
                                  0
                                  • M Offline
                                    M Offline
                                    meolic
                                    wrote on last edited by
                                    #41

                                    If I change line 23 in Main.qml to have "onPressed" instead of "onPressAndHold", the application is not working properly (problem with index). Where is the problem and how to solve it?

                                    EDIT: Adding hoverEnabled: true solved this issue. But I'm not sure whether hoverEnabled has important impact on efficiency?

                                    1 Reply Last reply
                                    0
                                    • M Offline
                                      M Offline
                                      meolic
                                      wrote on last edited by
                                      #42

                                      [quote author="Deqing" date="1293608551"]Cool! I solved it by simply moving "parent: loc" into the state "active".
                                      [/quote]

                                      I am trying the same. But items are not correctly drawn (wrong x,y) if I remove "parent: loc" from Image {id: item ... }.

                                      Can you give us your solution, please.

                                      1 Reply Last reply
                                      0

                                      • Login

                                      • Login or register to search.
                                      • First post
                                        Last post
                                      0
                                      • Categories
                                      • Recent
                                      • Tags
                                      • Popular
                                      • Users
                                      • Groups
                                      • Search
                                      • Get Qt Extensions
                                      • Unsolved