KDE API Reference

Contents

ListItemDragHandle QML Type

A handle to reorder items in a view. More...

Import Statement: import org.kde.kirigami
Inherits:

Item

Properties

Signals

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
import QtQuick.Layouts
import QtQuick.Controls as QQC2
import org.kde.kirigami 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
      }
  }
  ...

Property Documentation

dragActive : alias [read-only]

This property holds the fact that the handle is being dragged


incrementalMoves : bool

This property holds the fact that we are doing incremental move requests or not


listItem : Item

This property holds the delegate that will be dragged around.

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


listView : ListView

This property holds the ListView that the delegate belong to.


Signal Documentation

dropped(int oldIndex, int newIndex)

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

oldIndex the index the item is currently at

newIndex the index we want to drop the item to

Note: The corresponding handler is onDropped.


moveRequested(int oldIndex, int newIndex)

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);
}

oldIndex the index the item is currently at

newIndex the index we want to move the item to

Note: The corresponding handler is onMoveRequested.