ListItemDragHandle Class Reference

Inheritance diagram for ListItemDragHandle:

Properties
Item	listItem
ListView	listView

Signals
void	dropped ()
void	moveRequested (int oldIndex, int newIndex)

Additional Inherited Members
Public Member Functions inherited from QtQuick.Item
	childAt (real x, real y)
bool	contains (point point)
	dumpItemTree ()
	forceActiveFocus ()
	forceActiveFocus (Qt::FocusReason reason)
bool	grabToImage (callback, targetSize)
point	mapFromGlobal (real x, real y)
point	mapFromItem (Item item, point p)
point	mapFromItem (Item item, real x, real y)
rect	mapFromItem (Item item, real x, real y, real width, real height)
rect	mapFromItem (Item item, rect r)
point	mapToGlobal (real x, real y)
point	mapToItem (Item item, point p)
point	mapToItem (Item item, real x, real y)
rect	mapToItem (Item item, real x, real y, real width, real height)
rect	mapToItem (Item item, rect r)
	nextItemInFocusChain (bool forward)

Detailed Description

Implements a drag handle supposed to be in items in ListViews to reorder items The ListView must visualize a model which supports item reordering, such as ListModel.move() or QAbstractItemModel instances with moveRows() correctly implemented.

In order for ListItemDragHandle to work correctly, the listItem that is being dragged should not directly be the delegate of the ListView, but a child of it.

It is recommended to use DelagateRecycler as base delegate like the following code:

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami
  ...
  Component {
      id: delegateComponent
      QQC2.ItemDelegate {
          id: listItem
          contentItem: RowLayout {
              Kirigami.ListItemDragHandle {
                  listItem: listItem
                  listView: mainList
                  onMoveRequested: (oldIndex, newIndex) => {
                      listModel.move(oldIndex, newIndex, 1);
                  }
              }
              QQC2.Label {
                  text: model.label
              }
          }
      }
  }
  ListView {
      id: mainList
 
      model: ListModel {
          id: listModel
          ListElement {
              label: "Item 1"
          }
          ListElement {
              label: "Item 2"
          }
          ListElement {
              label: "Item 3"
          }
      }
      //this is optional to make list items animated when reordered
      moveDisplaced: Transition {
          YAnimator {
              duration: Kirigami.Units.longDuration
              easing.type: Easing.InOutQuad
          }
      }
      delegate: Loader {
          width: mainList.width
          sourceComponent: delegateComponent
      }
  }
  ...

Since

2.5

Definition at line 73 of file ListItemDragHandle.qml.

Property Documentation

listItem

Item ListItemDragHandle::listItem

read

This property holds the delegate that will be dragged around.

This item must be a child of the actual ListView's delegate.

Definition at line 80 of file ListItemDragHandle.qml.

listView

ListView ListItemDragHandle::listView

read

This property holds the ListView that the delegate belong to.

Definition at line 84 of file ListItemDragHandle.qml.

Member Function Documentation

dropped

void ListItemDragHandle::dropped ( )

signal

This signal is emitted when the drag operation is complete and the item has been dropped in the new final position.

moveRequested

void ListItemDragHandle::moveRequested ( int oldIndex, int newIndex )

signal

This signal is emitted when the drag handle wants to move the item in the model.

The following example does the move in the case a ListModel is used:

onMoveRequested: (oldIndex, newIndex) => {
    listModel.move(oldIndex, newIndex, 1);
}

Parameters

oldIndex	the index the item is currently at
newIndex	the index we want to move the item to

---

The documentation for this class was generated from the following file:

• ListItemDragHandle.qml