Hi, I am trying to implement a panel which contents could be rearranged by dragging and dropping. This panel component is meant to be used in a desktop application. The contents inside the panel have an equal width, but their height varies. The functionality should be a bit similar to MDI toolbars - the bar can have multiple palettes which can be rearranged by dragging and dropping.
I did some Googling before trying to implement this feature and found this: http://blogofmu.com/2011/04/18/drag-and-drop-reorder-list-in-qml-qt/. This approach however has two issues: the height of the delegate is fixed and it uses MouseArea's drag to move the delegate item when dragging, which probably is not such a good idea as the ListView manages the positioning of the delegates. The ListView also feels a bit overkill for this use as there is no need for swiping, highlighting etc. Using a ListView is problematic also because I need to specify a model and can not just define a list of components as children of the list. What I would like to implmenent is a component that is basically a Column but with the drag & drop functionality. I have tried searching for a solution for this, but have not been able to find anything. According to the documentation of Column, it does not seem to be possible to change the order of the elements (or at least I have not found any way of doing this). Because I was unable to find a way of doing what I wanted with a Column, I also tried with a ListView and actually got it to kind of work. I implemented the dragging by monitoring which index is under the cursor (with indexAt(x, y)) when the mouse button is pressed, and then moving the selected item to the index in the model. Here is the javascript I used: onMousePositionChanged: { var listPos = mapToItem(listView, mouseX, mouseY) var newIndex = listView.indexAt(0, listPos.y) listView.model.move(index, newIndex, 1) } The code above is a simplified version of what I used, but I hope it gives you an idea how the thing works. The problem with this approach is that because the delegates have different heights, the item in the model will be moved to a different index and then back because after the item has moved in the model, the delegate under the cursor will have changed. I thought I could get around this issue by checking where the dragged item would be positioned if it would be moved in the model and move it only if the cursor would be on top of the item also after the item has moved. For this I would have needed to get the height of the delegate item at a certain index, but as it turned out, there seems to be no way of getting the delegate from the list. I would basically be ok with any solution that would work properly. Any ideas? Regards, Miko _______________________________________________ Qt-qml mailing list [email protected] http://lists.qt.nokia.com/mailman/listinfo/qt-qml
