Ubuntu UI Toolkit

Merge lp:~zsombi/ubuntu-ui-toolkit/82-dragging-mode into lp:ubuntu-ui-toolkit/staging

82-dragging-mode
Merge into staging

Proposed by Zsombor Egri on 2015-02-27

Status:

Merged

Approved by:

Cris Dywan on 2015-02-27

Approved revision:

1454

Merged at revision:

1423

Proposed branch:

lp:~zsombi/ubuntu-ui-toolkit/82-dragging-mode

Merge into:

lp:ubuntu-ui-toolkit/staging

Diff against target:

2582 lines (+1873/-91)

22 files modified

components.api (+19/-0)
debian/control (+1/-0)
examples/ubuntu-ui-toolkit-gallery/NewListItems.qml (+92/-30)
modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml (+98/-13)
modules/Ubuntu/Components/UbuntuListView.qml (+7/-0)
modules/Ubuntu/Components/plugin/plugin.cpp (+1/-0)
modules/Ubuntu/Components/plugin/plugin.pro (+6/-2)
modules/Ubuntu/Components/plugin/privates/listitemdragarea.cpp (+313/-0)
modules/Ubuntu/Components/plugin/privates/listitemdragarea.h (+55/-0)
modules/Ubuntu/Components/plugin/privates/listitemdraghandler.cpp (+86/-0)
modules/Ubuntu/Components/plugin/privates/listitemdraghandler.h (+47/-0)
modules/Ubuntu/Components/plugin/uclistitem.cpp (+232/-18)
modules/Ubuntu/Components/plugin/uclistitem.h (+58/-1)
modules/Ubuntu/Components/plugin/uclistitem_p.h (+17/-4)
modules/Ubuntu/Components/plugin/uclistitemstyle.cpp (+15/-0)
modules/Ubuntu/Components/plugin/uclistitemstyle.h (+10/-2)
modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp (+339/-11)
modules/Ubuntu/Test/UbuntuTestCase.qml (+7/-0)
tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml (+0/-3)
tests/resources/listitems/ListItemDragging.qml (+174/-0)
tests/resources/listitems/ListItemTest.qml (+0/-1)
tests/unit_x11/tst_components/tst_listitem.qml (+296/-6)

To merge this branch:

bzr merge lp:~zsombi/ubuntu-ui-toolkit/82-dragging-mode

Medium

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration	2015-02-27	Needs Fixing on 2015-02-27
Cris Dywan		2015-02-27	Approve on 2015-02-27
Review via email: mp+251212@code.launchpad.net

This proposal supersedes a proposal from 2015-01-12.

Commit message

Implement ListItem dragging support in ListView

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-19: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1461/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-23: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1465/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-23: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1470/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-25: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1475/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-25: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1477/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-25: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1478/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-25: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1481/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2015-02-26: Posted in a previous version of this proposal

Unfortunately the "not all features of dragging will be possible on this model." message isn't working well as it is now, because it's basically impossible to "fix" the code.

What we could have, though, is a message saying something like "Dragging is only supported when using a QAbstractItemModel, ListModel or list".

Other than that it's looking pretty good, I haven't spotted any more bugs.

Note: I see some weird bits in the diff that are changes from staging, not this branch, let's be careful not to merge anything unwanted here.

review: Needs Fixing

Revision history for this message

Zsombor Egri (zsombi) wrote on 2015-02-26: Posted in a previous version of this proposal

> Unfortunately the "not all features of dragging will be possible on this
> model." message isn't working well as it is now, because it's basically
> impossible to "fix" the code.
>
> What we could have, though, is a message saying something like "Dragging is
> only supported when using a QAbstractItemModel, ListModel or list".

I'll add a fix for that.

>
> Other than that it's looking pretty good, I haven't spotted any more bugs.
>
> Note: I see some weird bits in the diff that are changes from staging, not
> this branch, let's be careful not to merge anything unwanted here.

Yes, you asked me to revert the staging which had a regression due to the Page vs. Loader fix, I'll merge the staging again so we do have a clean sync.

Revision history for this message

Cris Dywan (kalikiana) wrote on 2015-02-27:

Thanks for addressing the comments!

Looking good now!

review: Approve

Revision history for this message

PS Jenkins bot (ps-jenkins) on 2015-02-27:

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2015-02-27:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1488/rebuild

review: Needs Fixing (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Dan Chapman 

Tom Mirmar

Ubuntu SDK team

Zsombor Egri

 === modified file 'components.api'
 --- components.api	2015-02-19 10:10:53 +0000
 +++ components.api	2015-02-27 07:56:03 +0000
@@ -686,6 +686,7 @@
      function mouseLongPress(item, x, y, button, modifiers, delay)
      function tryCompareFunction(func, expectedResult, timeout)
      function typeString(string)
++    function warningFormat(line, column, message)
  plugins.qmltypes
      name: "FilterBehavior"
      prototype: "QObject"
@@ -921,6 +922,16 @@
      name: "quitWithError"
      Parameter { name: "errorMessage"; type: "string" }
      Method { name: "quitWithError" }
++    name: "UCDragEvent"
++    prototype: "QObject"
++    exports: ["ListItemDrag 1.2"]
++    name: "Status"
++    Property { name: "status"; type: "Status"; isReadonly: true }
++    Property { name: "from"; type: "int"; isReadonly: true }
++    Property { name: "to"; type: "int"; isReadonly: true }
++    Property { name: "minimumIndex"; type: "int" }
++    Property { name: "maximumIndex"; type: "int" }
++    Property { name: "accept"; type: "bool" }
      name: "UCInverseMouse"
      prototype: "UCMouse"
      exports: ["InverseMouse 0.1", "InverseMouse 1.0"]
@@ -935,6 +946,8 @@
      Property { name: "contentMoving"; type: "bool"; isReadonly: true }
      Property { name: "color"; type: "QColor" }
      Property { name: "highlightColor"; type: "QColor" }
++    Property { name: "dragging"; type: "bool"; isReadonly: true }
++    Property { name: "dragMode"; type: "bool" }
      Property { name: "selected"; type: "bool" }
      Property { name: "selectMode"; type: "bool" }
      Property { name: "action"; type: "UCAction"; isPointer: true }
@@ -960,7 +973,9 @@
      prototype: "QQuickItem"
      exports: ["Ubuntu.Components.Styles/ListItemStyle 1.2"]
      Property { name: "snapAnimation"; type: "QQuickAbstractAnimation"; isPointer: true }
++    Property { name: "dropAnimation"; type: "QQuickPropertyAnimation"; isPointer: true }
      Property { name: "animatePanels"; type: "bool"; isReadonly: true }
++    Property { name: "dragPanel"; type: "QQuickItem"; isPointer: true }
      Method {
      name: "swipeEvent"
      Parameter { name: "event"; type: "UCSwipeEvent"; isPointer: true }
@@ -1079,6 +1094,10 @@
      exports: ["ViewItems 1.2"]
      Property { name: "selectMode"; type: "bool" }
      Property { name: "selectedIndices"; type: "QList<int>" }
++    Property { name: "dragMode"; type: "bool" }
++    Signal {
++    name: "dragUpdated"
++    Parameter { name: "event"; type: "UCDragEvent"; isPointer: true }
      name: "UbuntuI18n"
      prototype: "QObject"
      exports: ["i18n 0.1", "i18n 1.0"]
 === modified file 'debian/control'
 --- debian/control	2015-02-10 16:47:59 +0000
 +++ debian/control	2015-02-27 07:56:03 +0000
@@ -24,6 +24,7 @@
                 qtdeclarative5-unity-action-plugin (>= 1.1.0),
                 qml-module-qtquick-localstorage | qtdeclarative5-localstorage-plugin,
                 qml-module-qt-labs-settings | qtdeclarative5-settings-plugin,
++               qml-module-qtqml-models2,
                 qtdeclarative5-doc-html,
                 qtwebkit5-doc-html,
                 qtsvg5-doc-html,
 === modified file 'examples/ubuntu-ui-toolkit-gallery/NewListItems.qml'
 --- examples/ubuntu-ui-toolkit-gallery/NewListItems.qml	2015-02-18 11:16:32 +0000
 +++ examples/ubuntu-ui-toolkit-gallery/NewListItems.qml	2015-02-27 07:56:03 +0000
@@ -34,36 +34,6 @@
          // clip the action delegates while swiping left/right
          clip: true
--        ListView {
--            height: units.gu(20)
--            width: parent.width
--
--            model: [ i18n.tr("Basic"), i18n.tr("Colored divider"), i18n.tr("No divider") ]
--            delegate: ListItemWithLabel {
--                text: modelData
--                divider {
--                    colorFrom: modelData == i18n.tr("Colored divider") ? UbuntuColors.red : Qt.rgba(0.0, 0.0, 0.0, 0.0)
--                    colorTo: modelData == i18n.tr("Colored divider") ? UbuntuColors.green : Qt.rgba(0.0, 0.0, 0.0, 0.0)
--                    visible: modelData != i18n.tr("No divider")
--                }
--            }
--        }
--     }
--
--    TemplateSection {
--        className: "ListItem"
--        // no spacing between the list items in the Column
--        spacing: 0
--        Item {
--            // compensate for the spacing of 0 by adding this
--            // Item inbetween the title and the list items.
--            height: units.gu(3)
--            width: parent.width
--        }
--
--        // clip the action delegates while swiping left/right
--        clip: true
--
         ListItemWithLabel {
              color: UbuntuColors.blue
              text: i18n.tr("Colored")
@@ -155,4 +125,96 @@
+             }
+         }
+     }
++
++    TemplateSection {
++        className: "ListItem"
++        title: "Select mode"
++
++        ListView {
++            height: units.gu(20)
++            width: parent.width
++            clip: true
++
++            ViewItems.dragMode: ViewItems.selectMode
++            ViewItems.onDragUpdated: {
++                if (event.status == ListItemDrag.Started) {
++                    if (model[event.from] == "Immutable")
++                        event.accept = false;
++                    return;
++                }
++                if (model[event.to] == "Immutable") {
++                    event.accept = false;
++                    return;
++                }
++                // No instantaneous updates
++                if (event.status == ListItemDrag.Moving) {
++                    event.accept = false;
++                    return;
++                }
++                if (event.status == ListItemDrag.Dropped) {
++                    var fromItem = model[event.from];
++                    var list = model;
++                    list.splice(event.from, 1);
++                    list.splice(event.to, 0, fromItem);
++                    model = list;
++                }
++            }
++
++            model: [ i18n.tr("Basic"), i18n.tr("Colored divider"), i18n.tr("Immutable"), i18n.tr("No divider") ]
++            delegate: ListItemWithLabel {
++                text: modelData
++                color: dragging ? "lightblue" : "transparent"
++                divider {
++                    colorFrom: modelData == i18n.tr("Colored divider") ? UbuntuColors.red : Qt.rgba(0.0, 0.0, 0.0, 0.0)
++                    colorTo: modelData == i18n.tr("Colored divider") ? UbuntuColors.green : Qt.rgba(0.0, 0.0, 0.0, 0.0)
++                    visible: modelData != i18n.tr("No divider")
++                }
++            }
++        }
++    }
++
++    TemplateSection {
++        className: "ListItem"
++        title: "Drag mode"
++
++        UbuntuListView {
++            height: units.gu(20)
++            width: parent.width
++            clip: true
++            ViewItems.dragMode: true
++            ViewItems.onDragUpdated: {
++                if (event.status == ListItemDrag.Started) {
++                    if (model.get(event.from).label == "Immutable")
++                        event.accept = false;
++                    return;
++                }
++                if (model.get(event.to).label == "Immutable") {
++                    event.accept = false;
++                    return;
++                }
++                // Live update as you drag
++                if (event.status == ListItemDrag.Moving) {
++                    model.move(event.from, event.to, 1);
++                }
++            }
++
++
++            model: ListModel {
++                ListElement { label: "Basic" }
++                ListElement { label: "Colored divider" }
++                ListElement { label: "Immutable" }
++                ListElement { label: "No divider" }
++            }
++
++            delegate: ListItemWithLabel {
++                text: modelData
++                color: dragMode ? "lightblue" : "lightgray"
++                divider {
++                    colorFrom: modelData == i18n.tr("Colored divider") ? UbuntuColors.red : Qt.rgba(0.0, 0.0, 0.0, 0.0)
++                    colorTo: modelData == i18n.tr("Colored divider") ? UbuntuColors.green : Qt.rgba(0.0, 0.0, 0.0, 0.0)
++                    visible: modelData != i18n.tr("No divider")
++                }
++            }
++        }
++    }
+ }
 === modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml'
 --- modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2015-02-18 10:57:06 +0000
 +++ modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2015-02-27 07:56:03 +0000
@@ -162,7 +162,56 @@
+             }
+         }
+     }
++    // drag panel
++    Component {
++        id: dragDelegate
++        Item {
++            id: dragPanel
++            objectName: "drag_panel" + index
++            anchors.fill: parent ? parent : undefined
++            Icon {
++                objectName: "icon"
++                id: dragIcon
++                anchors.centerIn: parent
++                width: units.gu(3)
++                height: width
++                name: "view-grid-symbolic"
++                opacity: 0.0
++                scale: 0.5
++            }
++            Binding {
++                target: listItemStyle
++                property: "dragPanel"
++                value: dragPanel
++            }
++            states: State {
++                name: "enabled"
++                when: loaded && styledItem.dragMode
++                PropertyChanges {
++                    target: dragIcon
++                    opacity: 1.0
++                    scale: 1.0
++                }
++            }
++            transitions: Transition {
++                from: ""
++                to: "*"
++                reversible: true
++                enabled: listItemStyle.animatePanels
++                ParallelAnimation {
++                    OpacityAnimator {
++                        easing: UbuntuAnimation.StandardEasing
++                        duration: UbuntuAnimation.FastDuration
++                    }
++                    ScaleAnimator {
++                        easing: UbuntuAnimation.StandardEasing
++                        duration: UbuntuAnimation.FastDuration
++                    }
++                }
++            }
++        }
++    }
      // leading panel loader
      Loader {
@@ -200,20 +249,18 @@
+                 }
+             }
+         ]
--        transitions: [
--            Transition {
--                from: ""
--                to: "selectable"
--                reversible: true
--                enabled: listItemStyle.animatePanels
--                PropertyAnimation {
--                    target: styledItem.contentItem
--                    properties: "anchors.leftMargin"
--                    easing: UbuntuAnimation.StandardEasing
--                    duration: UbuntuAnimation.FastDuration
--                }
++        transitions: Transition {
++            from: ""
++            to: "selectable"
++            reversible: true
++            enabled: listItemStyle.animatePanels
++            PropertyAnimation {
++                target: styledItem.contentItem
++                properties: "anchors.leftMargin"
++                easing: UbuntuAnimation.StandardEasing
++                duration: UbuntuAnimation.FastDuration
+             }
--        ]
++        }
+     }
      // trailing panel loader
      Loader {
@@ -229,6 +276,38 @@
                               panelComponent : null
          // context properties used in delegates
          readonly property bool leading: false
++        readonly property bool loaded: status == Loader.Ready
++
++        // panel states
++        states: State {
++            name: "draggable"
++            when: styledItem.dragMode
++            PropertyChanges {
++                target: trailingLoader
++                sourceComponent: dragDelegate
++                width: units.gu(5)
++            }
++            PropertyChanges {
++                target: listItemStyle
++                anchors.rightMargin: 0
++            }
++            PropertyChanges {
++                target: styledItem.contentItem
++                anchors.rightMargin: units.gu(5)
++            }
++        }
++        transitions: Transition {
++            from: ""
++            to: "*"
++            reversible: true
++            enabled: listItemStyle.animatePanels
++            PropertyAnimation {
++                target: styledItem.contentItem
++                properties: "anchors.rightMargin"
++                easing: UbuntuAnimation.StandardEasing
++                duration: UbuntuAnimation.FastDuration
++            }
++        }
+     }
      // internals
@@ -303,6 +382,12 @@
+         }
+     }
++    // simple drop animation
++    dropAnimation: SmoothedAnimation {
++        properties: "y"
++        velocity: units.gu(60)
++    }
++
      onXChanged: internals.updateSnapDirection()
      // overriding default functions
      function swipeEvent(event) {
 === modified file 'modules/Ubuntu/Components/UbuntuListView.qml'
 --- modules/Ubuntu/Components/UbuntuListView.qml	2014-11-18 11:38:59 +0000
 +++ modules/Ubuntu/Components/UbuntuListView.qml	2015-02-27 07:56:03 +0000
@@ -133,4 +133,11 @@
          enabled: root.expandedIndex != -1
          onClicked: root.expandedIndex = -1;
+     }
++
++    // animate move displaced
++    moveDisplaced: Transition {
++        UbuntuNumberAnimation {
++            properties: "x,y"
++        }
++    }
+ }
 === modified file 'modules/Ubuntu/Components/plugin/plugin.cpp'
 --- modules/Ubuntu/Components/plugin/plugin.cpp	2015-02-11 20:17:06 +0000
 +++ modules/Ubuntu/Components/plugin/plugin.cpp	2015-02-27 07:56:03 +0000
@@ -173,6 +173,7 @@
      qmlRegisterType<UCListItem>(uri, 1, 2, "ListItem");
      qmlRegisterType<UCListItemDivider>();
      qmlRegisterUncreatableType<UCSwipeEvent>(uri, 1, 2, "SwipeEvent", "This is an event object.");
++    qmlRegisterUncreatableType<UCDragEvent>(uri, 1, 2, "ListItemDrag", "This is an event object");
      qmlRegisterType<UCListItemActions>(uri, 1, 2, "ListItemActions");
      qmlRegisterUncreatableType<UCViewItemsAttached>(uri, 1, 2, "ViewItems", "Not instantiable");
+ }
 === modified file 'modules/Ubuntu/Components/plugin/plugin.pro'
 --- modules/Ubuntu/Components/plugin/plugin.pro	2015-02-12 14:35:51 +0000
 +++ modules/Ubuntu/Components/plugin/plugin.pro	2015-02-27 07:56:03 +0000
@@ -75,7 +75,9 @@
      propertychange_p.h \
      uclistitemstyle.h \
      ucserviceproperties.h \
--    ucserviceproperties_p.h
++    ucserviceproperties_p.h \
++    privates/listitemdragarea.h \
++    privates/listitemdraghandler.h
  SOURCES += plugin.cpp \
      uctheme.cpp \
@@ -118,7 +120,9 @@
      propertychange_p.cpp \
      uclistitemstyle.cpp \
      ucviewitemsattached.cpp \
--    ucserviceproperties.cpp
++    ucserviceproperties.cpp \
++    privates/listitemdragarea.cpp \
++    privates/listitemdraghandler.cpp
  # adapters
  SOURCES += adapters/alarmsadapter_organizer.cpp
 === added directory 'modules/Ubuntu/Components/plugin/privates'
 === added file 'modules/Ubuntu/Components/plugin/privates/listitemdragarea.cpp'
 --- modules/Ubuntu/Components/plugin/privates/listitemdragarea.cpp	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/plugin/privates/listitemdragarea.cpp	2015-02-27 07:56:03 +0000
@@ -0,0 +1,313 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++#include "listitemdragarea.h"
++#include "listitemdraghandler.h"
++#include "uclistitem.h"
++#include "uclistitem_p.h"
++#include "ucunits.h"
++#include "i18n.h"
++#include <QtQml/QQmlInfo>
++#include <QtQuick/private/qquickitem_p.h>
++#include <QtQuick/private/qquickflickable_p.h>
++
++#define IMPLICIT_DRAG_WIDTH_GU  5
++#define DRAG_SCROLL_TIMEOUT     15
++
++#define MIN(x, y)           ((x) < (y) ? (x) : (y))
++#define MAX(x, y)           ((x) > (y) ? (x) : (y))
++#define CLAMP(v, min, max)  ((min) <= (max) ? MAX(min, MIN(v, max)) : MAX(max, MIN(v, min)))
++
++ListItemDragArea::ListItemDragArea(QQuickItem *parent)
++    : QQuickItem(parent)
++    , listView(static_cast<QQuickFlickable*>(parent))
++    , viewAttached(0)
++    , scrollDirection(0)
++    , fromIndex(-1)
++    , toIndex(-1)
++    , min(-1)
++    , max(-1)
++{
++    setAcceptedMouseButtons(Qt::LeftButton);
++
++    // for testing purposes
++    setObjectName("drag_area");
++}
++
++void ListItemDragArea::init()
++{
++    setParentItem(static_cast<QQuickItem*>(parent()));
++    QQuickAnchors *anchors = QQuickItemPrivate::get(this)->anchors();
++    anchors->setFill(parentItem());
++    viewAttached = static_cast<UCViewItemsAttached*>(
++                qmlAttachedPropertiesObject<UCViewItemsAttached>(listView));
++    reset();
++}
++
++void ListItemDragArea::reset()
++{
++    fromIndex = toIndex = min = max = -1;
++    item = 0;
++    lastPos = QPointF();
++    setEnabled(true);
++}
++
++void ListItemDragArea::timerEvent(QTimerEvent *event)
++{
++    QQuickItem::timerEvent(event);
++    if (event->timerId() == scrollTimer.timerId()) {
++        qreal scrollAmount = UCUnits::instance().gu(0.5) * scrollDirection;
++        qreal contentHeight = listView->contentHeight();
++        qreal height = listView->height();
++        if ((contentHeight - height) > 0) {
++            // take topMargin into account when clamping
++            qreal contentY = CLAMP(listView->contentY() + scrollAmount,
++                                   -listView->topMargin(),
++                                   contentHeight - height + listView->originY());
++            listView->setContentY(contentY);
++            // update
++            mouseMoveEvent(0);
++        }
++    }
++}
++
++// starts dragging operation; emits draggingStarted() and if the signal handler is implemented,
++// depending on the acceptance, will create a fake item and will start dragging. If the start is
++// cancelled, no dragging will happen
++void ListItemDragArea::mousePressEvent(QMouseEvent *event)
++{
++    mousePos = event->localPos();
++    QPointF pos = mapDragAreaPos();
++    UCListItem *listItem = itemAt(pos.x(), pos.y());
++    if (!listItem) {
++        event->setAccepted(false);
++        return;
++    }
++    // check if we tapped over the drag panel
++    UCListItemPrivate *pListItem = UCListItemPrivate::get(listItem);
++    if (pListItem->styleItem && pListItem->styleItem->m_dragPanel) {
++        // convert mouse into local panel coordinates
++        QPointF panelPos = pListItem->styleItem->m_dragPanel->mapFromItem(this, mousePos);
++        if (!pListItem->styleItem->m_dragPanel->contains(panelPos)) {
++            // not tapped over the drag panel, leave
++            event->setAccepted(false);
++            return;
++        }
++    }
++    int index = indexAt(pos.x(), pos.y());
++    bool start = false;
++    max = min = -1;
++    // call start handler if implemented
++    UCViewItemsAttachedPrivate *pViewAttached = UCViewItemsAttachedPrivate::get(viewAttached);
++    if (pViewAttached->isDragUpdatedConnected()) {
++        UCDragEvent drag(UCDragEvent::Started, index, -1, -1, -1);
++        Q_EMIT viewAttached->dragUpdated(&drag);
++        start = drag.m_accept;
++        min = drag.m_minimum;
++        max = drag.m_maximum;
++    } else {
++        qmlInfo(parentItem()) << UbuntuI18n::instance().tr(
++                                     "ListView has no ViewItems.dragUpdated() signal handler implemented. "\
++                                     "No dragging will be possible.");
++    }
++    if (start) {
++        pViewAttached->buildChangesList(false);
++        fromIndex = toIndex = index;
++        lastPos = pos;
++        // create temp drag item
++        createDraggedItem(listItem);
++    }
++    event->setAccepted(start);
++}
++
++// stops dragging, performs drop event (event.direction = ListItemDrag.Steady)
++// and clears temporary item
++void ListItemDragArea::mouseReleaseEvent(QMouseEvent *event)
++{
++    mousePos = event->localPos();
++    if (item.isNull()) {
++        return;
++    }
++    // stop scroll timer
++    scrollTimer.stop();
++    UCViewItemsAttachedPrivate *pViewAttached = UCViewItemsAttachedPrivate::get(viewAttached);
++    if (pViewAttached->isDragUpdatedConnected() && (fromIndex != toIndex)) {
++        UCDragEvent drag(UCDragEvent::Dropped, fromIndex, toIndex, min, max);
++        Q_EMIT viewAttached->dragUpdated(&drag);
++        updateDraggedItem();
++        if (drag.m_accept) {
++            pViewAttached->updateSelectedIndices(fromIndex, toIndex);
++        }
++    }
++    // unlock flickables
++    pViewAttached->clearChangesList();
++    // perform drop
++    UCListItemPrivate::get(item.data())->dragHandler->drop();
++    item = 0;
++    fromIndex = toIndex = -1;
++}
++
++void ListItemDragArea::mouseMoveEvent(QMouseEvent *event)
++{
++    if (event) {
++        mousePos = event->localPos();
++    }
++    if (!item) {
++        return;
++    }
++    QPointF pos = mapDragAreaPos();
++    qreal dy = -(lastPos.y() - pos.y());
++    qreal indexHotspot = item->y() + item->height() / 2;
++    // update dragged item even if the dragging may be forbidden
++    item->setY(item->y() + dy);
++    lastPos = pos;
++
++    // check what will be the index after the drag
++    int index = indexAt(pos.x(), indexHotspot);
++    if (index < 0) {
++        return;
++    }
++    if ((min >= 0) && (min > index)) {
++        // about to drag beyond the minimum, leave
++        return;
++    }
++    if ((max >= 0) && (max < index)) {
++        // about to drag beyond maximum, leave
++        return;
++    }
++
++    // should we scroll the view? use a margin of 20% of the dragged item's height from top and bottom of the item
++    qreal scrollMargin = item->height() * 0.2;
++    qreal topHotspot = item->y() + scrollMargin - listView->contentY();
++    qreal bottomHotspot = item->y() + item->height() - scrollMargin - listView->contentY();
++    // use MouseArea's top/bottom as limits
++    qreal topViewMargin = y() + listView->topMargin();
++    qreal bottomViewMargin = y() + height() - listView->bottomMargin();
++    scrollDirection = 0;
++    if (topHotspot < topViewMargin) {
++        // scroll upwards
++        scrollDirection = -1;
++    } else if (bottomHotspot > bottomViewMargin) {
++        // scroll downwards
++        scrollDirection = 1;
++    }
++    if (!scrollDirection) {
++        scrollTimer.stop();
++    } else if (!scrollTimer.isActive()){
++        scrollTimer.start(DRAG_SCROLL_TIMEOUT, this);
++    }
++
++    // do we have index change?
++    if (toIndex == index) {
++        // no change, leave
++        return;
++    }
++
++    toIndex = index;
++    if (fromIndex != toIndex) {
++        bool update = true;
++        UCViewItemsAttachedPrivate *pViewAttached = UCViewItemsAttachedPrivate::get(viewAttached);
++        if (pViewAttached->isDragUpdatedConnected()) {
++            UCDragEvent drag(UCDragEvent::Moving, fromIndex, toIndex, min, max);
++            Q_EMIT viewAttached->dragUpdated(&drag);
++            update = drag.m_accept;
++            if (update) {
++                pViewAttached->updateSelectedIndices(fromIndex, toIndex);
++            }
++        }
++        if (update) {
++            // update item coordinates in the dragged item
++            updateDraggedItem();
++            fromIndex = toIndex;
++        }
++    }
++}
++
++// returns the mapped mouse position of the dragged item's dragHandler to the ListView
++QPointF ListItemDragArea::mapDragAreaPos()
++{
++    QPointF pos(mousePos.x(), mousePos.y() + listView->contentY());
++    pos = listView->mapFromItem(this, pos);
++    return pos;
++}
++
++// calls ListView.indexAt() invokable
++int ListItemDragArea::indexAt(qreal x, qreal y)
++{
++    if (!listView) {
++        return -1;
++    }
++    int result = -1;
++    QMetaObject::invokeMethod(listView, "indexAt", Qt::DirectConnection,
++                              Q_RETURN_ARG(int, result),
++                              Q_ARG(qreal, x),
++                              Q_ARG(qreal, y)
++                              );
++    return result;
++}
++
++// calls ListView.itemAt() invokable
++UCListItem *ListItemDragArea::itemAt(qreal x, qreal y)
++{
++    if (!listView) {
++        return NULL;
++    }
++    QQuickItem *result = 0;
++    QMetaObject::invokeMethod(listView, "itemAt", Qt::DirectConnection,
++                              Q_RETURN_ARG(QQuickItem*, result),
++                              Q_ARG(qreal, x),
++                              Q_ARG(qreal, y)
++                              );
++    return static_cast<UCListItem*>(result);
++}
++
++// creates a temporary list item available for the dragging time
++void ListItemDragArea::createDraggedItem(UCListItem *baseItem)
++{
++    if (item || !baseItem) {
++        return;
++    }
++    QQmlComponent *delegate = listView->property("delegate").value<QQmlComponent*>();
++    if (!delegate) {
++        return;
++    }
++    // use baseItem's context to get access to the ListView's model roles
++    // use two-step component creation to have similar steps as when it is created in QML,
++    // so itemChanged() is invoked prior to componentComplete()
++    // use dragged item's context as parent context so we get all model roles and
++    // context properties of that item
++    QQmlContext *context = new QQmlContext(qmlContext(baseItem), baseItem);
++    item = static_cast<UCListItem*>(delegate->beginCreate(context));
++    if (item) {
++        QQml_setParent_noEvent(item, listView->contentItem());
++        // create drag handler instance
++        UCListItemPrivate *pItem = UCListItemPrivate::get(item);
++        pItem->dragHandler = new ListItemDragHandler(baseItem, item);
++        pItem->dragHandler->init();
++        // invokes itemChanged()
++        item->setParentItem(listView->contentItem());
++        // invoked componentComplete()
++        delegate->completeCreate();
++    }
++}
++
++void ListItemDragArea::updateDraggedItem()
++{
++    if (abs(fromIndex - toIndex) > 0) {
++        UCListItem *targetItem = itemAt(item->x(), item->y() + item->height() / 2);
++        UCListItemPrivate::get(item)->dragHandler->update(targetItem);
++    }
++}
 === added file 'modules/Ubuntu/Components/plugin/privates/listitemdragarea.h'
 --- modules/Ubuntu/Components/plugin/privates/listitemdragarea.h	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/plugin/privates/listitemdragarea.h	2015-02-27 07:56:03 +0000
@@ -0,0 +1,55 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++#ifndef LISTITEMDRAGAREA_H
++#define LISTITEMDRAGAREA_H
++
++#include "uclistitem.h"
++#include <QtCore/QBasicTimer>
++#include <QtCore/QPointer>
++
++class QQuickFlickable;
++class ListItemDragArea : public QQuickItem
++{
++    Q_OBJECT
++public:
++    explicit ListItemDragArea(QQuickItem *parent = 0);
++    void init();
++    void reset();
++
++protected:
++    void timerEvent(QTimerEvent *event);
++    void mousePressEvent(QMouseEvent *event);
++    void mouseReleaseEvent(QMouseEvent *event);
++    void mouseMoveEvent(QMouseEvent *event);
++
++private:
++    QBasicTimer scrollTimer;
++    QPointer<UCListItem> item;
++    QQuickFlickable *listView;
++    UCViewItemsAttached *viewAttached;
++    QPointF lastPos, mousePos;
++    int scrollDirection;
++    int fromIndex, toIndex, min, max;
++
++    QPointF mapDragAreaPos();
++    int indexAt(qreal x, qreal y);
++    UCListItem *itemAt(qreal x, qreal y);
++    void createDraggedItem(UCListItem *baseItem);
++    void updateDraggedItem();
++};
++
++#endif // LISTITEMDRAGAREA_H
 === added file 'modules/Ubuntu/Components/plugin/privates/listitemdraghandler.cpp'
 --- modules/Ubuntu/Components/plugin/privates/listitemdraghandler.cpp	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/plugin/privates/listitemdraghandler.cpp	2015-02-27 07:56:03 +0000
@@ -0,0 +1,86 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++#include "listitemdraghandler.h"
++#include "uclistitem.h"
++#include "uclistitem_p.h"
++#include "propertychange_p.h"
++#include <QtQuick/private/qquickanimation_p.h>
++
++ListItemDragHandler::ListItemDragHandler(UCListItem *baseItem, UCListItem *listItem)
++    : QObject(listItem)
++    , listItem(listItem)
++    , baseItem(baseItem)
++    , baseVisible(0)
++{
++    targetPos = baseItem->position();
++    baseVisible = new PropertyChange(baseItem, "visible");
++}
++
++ListItemDragHandler::~ListItemDragHandler()
++{
++    // make sure the property change object is deleted
++    delete baseVisible;
++}
++
++void ListItemDragHandler::init()
++{
++    PropertyChange::setValue(baseVisible, false);
++    // position the item and show it
++    listItem->setPosition(baseItem->position());
++    listItem->setZ(2);
++    listItem->setVisible(true);
++    // emit draggingChanged() signal
++    Q_EMIT listItem->draggingChanged();
++}
++
++// handles drop gesture animated if the style has animation defined for it
++void ListItemDragHandler::drop()
++{
++    QQuickPropertyAnimation *animation = UCListItemPrivate::get(listItem)->styleItem->m_dropAnimation;
++    if (animation) {
++        // complete any previous animation
++        animation->complete();
++
++        connect(animation, &QQuickAbstractAnimation::stopped,
++                this, &ListItemDragHandler::dropItem, Qt::DirectConnection);
++        // force properties to contain only the 'y' coordinate
++        animation->setProperties("y");
++        animation->setTargetObject(listItem);
++        animation->setFrom(listItem->y());
++        animation->setTo(targetPos.y());
++        animation->start();
++    } else {
++        dropItem();
++    }
++}
++
++// private slot connected to the reposition animation to drop item
++void ListItemDragHandler::dropItem()
++{
++    listItem->setVisible(false);
++    listItem->deleteLater();
++    delete baseVisible;
++    baseVisible = 0;
++}
++
++// update dragged item with the new target item the dragging is hovered over
++void ListItemDragHandler::update(UCListItem *hoveredItem)
++{
++    if (hoveredItem) {
++        targetPos = hoveredItem->position();
++    }
++}
 === added file 'modules/Ubuntu/Components/plugin/privates/listitemdraghandler.h'
 --- modules/Ubuntu/Components/plugin/privates/listitemdraghandler.h	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/plugin/privates/listitemdraghandler.h	2015-02-27 07:56:03 +0000
@@ -0,0 +1,47 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++#ifndef LISTITEMDRAGHANDLER_H
++#define LISTITEMDRAGHANDLER_H
++
++#include <QtCore/QObject>
++#include <QtCore/QPointer>
++#include <QtCore/QPointF>
++
++class UCListItem;
++class PropertyChange;
++class ListItemDragHandler : public QObject
++{
++    Q_OBJECT
++public:
++    explicit ListItemDragHandler(UCListItem *baseItem, UCListItem *listItem = 0);
++    ~ListItemDragHandler();
++
++    void init();
++    void drop();
++    void update(UCListItem *hoveredItem);
++
++private Q_SLOTS:
++    void dropItem();
++
++private:
++    UCListItem *listItem;
++    QPointer<UCListItem> baseItem;
++    PropertyChange *baseVisible;
++    QPointF targetPos;
++};
++
++#endif // LISTITEMDRAGHANDLER_H
 === modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
 --- modules/Ubuntu/Components/plugin/uclistitem.cpp	2015-02-19 12:17:01 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2015-02-27 07:56:03 +0000
@@ -240,7 +240,7 @@
      QObject::connect(&UCTheme::instance(), SIGNAL(nameChanged()), q, SLOT(_q_updateThemedData()));
      _q_updateThemedData();
--    // watch size change and set implicit size;
++    // watch grid unit size change and set implicit size
      QObject::connect(&UCUnits::instance(), SIGNAL(gridUnitChanged()), q, SLOT(_q_updateSize()));
      _q_updateSize();
+ }
@@ -314,6 +314,14 @@
      Q_EMIT q->selectModeChanged();
+ }
++// same for the dragMode
++void UCListItemPrivate::_q_syncDragMode()
++{
++    initStyleItem();
++    Q_Q(UCListItem);
++    Q_EMIT q->dragModeChanged();
++}
++
  /*!
   * \qmlproperty Component ListItem::style
   * Holds the style of the component defining the components visualizing the leading/
@@ -442,10 +450,12 @@
  void UCListItemPrivate::_q_updateSize()
+ {
      Q_Q(UCListItem);
--
      // update divider thickness
      divider->setImplicitHeight(UCUnits::instance().dp(DIVIDER_THICKNESS_DP));
--    QQuickItem *owner = flickable ? flickable : parentItem;
++    QQuickItem *owner = qobject_cast<QQuickItem*>(q->sender());
++    if (!owner && parentAttached) {
++        owner = static_cast<QQuickItem*>(parentAttached->parent());
++    }
      q->setImplicitWidth(owner ? owner->width() : UCUnits::instance().gu(IMPLICIT_LISTITEM_WIDTH_GU));
      q->setImplicitHeight(UCUnits::instance().gu(IMPLICIT_LISTITEM_HEIGHT_GU));
+ }
@@ -626,7 +636,7 @@
   * be highlighted, and \l highlighted property will not be toggled either. Also,
   * there will be no highlight happening if the click happens on the active component.
   * \qml
-- * import QtQuick 2.3
++ * import QtQuick 2.4
   * import Ubuntu.Components 1.2
+  *
   * MainView {
@@ -682,17 +692,17 @@
   * }
   * \endqml
+  *
-- * \c contentItem holds all components and resources declared as child to ListItem.
++ * \l contentItem holds all components and resources declared as child to ListItem.
   * Being an Item, all properties can be accessed or altered. However, make sure you
-- * never change \c x, \c y, \c width, \c height or \c anchors properties as those are
++ * never change \b x, \b y, \b width, \b height or \b anchors properties as those are
   * controlled by the ListItem itself when leading or trailing actions are revealed
   * or when selectable and draggable mode is turned on, and thus might cause the
   * component to misbehave. Anchors margins are free to alter.
+  *
   * Each ListItem has a thin divider shown on the bottom of the component. This
-- * divider can be configured through the \c divider grouped property, which can
++ * divider can be configured through the \l divider grouped property, which can
   * configure its margins from the edges of the ListItem as well as its visibility.
-- * When used in \c ListView or \l UbuntuListView, the last list item will not
++ * When used in ListView or \l UbuntuListView, the last list item will not
   * show the divider no matter of the visible property value set.
+  *
   * ListItem can handle actions that can get swiped from front or back of the item.
@@ -754,13 +764,13 @@
+  *
   * The component is styled using the \l ListItemStyle style interface.
+  *
-- * \section3 Selection mode
++ * \section2 Selection mode
   * The selection mode of a ListItem is controlled by the \l ViewItems::selectMode
   * attached property. This property is attached to each parent item of the ListItem
   * exception being when used as delegate in ListView, where the property is attached
   * to the view itself.
   * \qml
-- * import QtQuick 2.3
++ * import QtQuick 2.4
   * import Ubuntu.Components 1.2
+  *
   * Flickable {
@@ -795,6 +805,177 @@
   * implies is that leading and trailing actions cannot be swiped in. \ selectable
   * property can be used to implement different behavior when \l clicked or \l
   * pressAndHold.
++ *
++ * \section2 Dragging mode
++ * The dragging mode is only supported on ListView, as it requires a model supported
++ * view to be used. The drag mode can be activated through the \l ViewItems::dragMode
++ * attached property, when attached to the ListView. The items will show a panel
++ * as defined in the style, and dragging will be possible when initiated over this
++ * panel. Pressing or clicking anywhere else on the ListItem will invoke the item's
++ * action assigned to the touched area.
++ *
++ * The dragging is realized through the \l ViewItems::dragUpdated signal, and
++ * a signal handler must be implemented in order to have the draging working.
++ * Implementations can drive the drag to be live (each time the dragged item is
++ * dragged over an other item will change the order of the items) or drag'n'drop
++ * way (the dragged item will be moved only when the user releases the item by
++ * dropping it to the desired position). The signal has a \l ListItemDrag \e event
++ * parameter, which gives detailed information about the drag event, like started,
++ * dragged up or downwards or dropped, allowing in this way various restrictions
++ * on the dragging.
++ *
++ * The dragging event provides three states reported in \l ListItemDrag::status
++ * field, \e Started, \e Moving and \e Dropped. The other event field values depend
++ * on the status, therefore the status must be taken into account when implementing
++ * the signal handler. In case live dragging is needed, \e Moving state must be
++ * checked, and for non-live drag (drag'n'drop) the \e Moving state must be blocked
++ * by setting \e {event.accept = false}, otherwise the dragging will not know
++ * whether the model has been updated or not.
++ *
++ * Example of live drag implementation:
++ * \qml
++ * import QtQuick 2.4
++ * import Ubuntu.Components 1.2
++ *
++ * ListView {
++ *     model: ListModel {
++ *         Component.onCompleted: {
++ *             for (var i = 0; i < 100; i++) {
++ *                 append({tag: "List item #"+i});
++ *             }
++ *         }
++ *     }
++ *     delegate: ListItem {
++ *         Label {
++ *             text: modelData
++ *         }
++ *         color: dragMode ? "lightblue" : "lightgray"
++ *         onPressAndHold: ListView.view.ViewItems.dragMode =
++ *             !ListView.view.ViewItems.dragMode
++ *     }
++ *     ViewItems.onDragUpdated: {
++ *         if (event.status == ListItemDrag.Moving) {
++ *             model.move(event.from, event.to, 1);
++ *         }
++ *     }
++ *     moveDisplaced: Transition {
++ *         UbuntuNumberAnimation {
++ *             property: "y"
++ *         }
++ *     }
++ * }
++ * \endqml
++ *
++ * Example of drag'n'drop implementation:
++ * \qml
++ * import QtQuick 2.4
++ * import Ubuntu.Components 1.2
++ *
++ * ListView {
++ *     model: ListModel {
++ *         Component.onCompleted: {
++ *             for (var i = 0; i < 100; i++) {
++ *                 append({tag: "List item #"+i});
++ *             }
++ *         }
++ *     }
++ *     delegate: ListItem {
++ *         Label {
++ *             text: modelData
++ *         }
++ *         color: dragMode ? "lightblue" : "lightgray"
++ *         onPressAndHold: ListView.view.ViewItems.dragMode =
++ *             !ListView.view.ViewItems.dragMode
++ *     }
++ *     ViewItems.onDragUpdated: {
++ *         if (event.status == ListItemDrag.Moving) {
++ *             // inform dragging that move is not performed
++ *             event.accept = false;
++ *         } else if (event.status == ListItemDrag.Dropped) {
++ *             model.move(event.from, event.to, 1);
++ *         }
++ *     }
++ *     moveDisplaced: Transition {
++ *         UbuntuNumberAnimation {
++ *             property: "y"
++ *         }
++ *     }
++ * }
++ * \endqml
++ *
++ * ListItem does not provide animations when the ListView's model is updated. In order
++ * to have animation, use UbuntuListView or provide a transition animation to the
++ * moveDisplaced or displaced property of the ListView.
++ *
++ * \section3 Using non-QAbstractItemModel models
++ * Live dragging (moving content on the move) is only possible when the model is
++ * a derivate of the QAbstractItemModel. When a list model is used, the ListView
++ * will re-create all the items in the view, meaning that the dragged item will
++ * no longer be controlled by the dragging. However, non-live drag'n'drop operations
++ * can still be implemented with these kind of lists as well.
++ * \qml
++ * import QtQuick 2.4
++ * import Ubuntu.Components 1.2
++ *
++ * ListView {
++ *     model: ["plum", "peach", "pomegrenade", "pear", "banana"]
++ *     delegate: ListItem {
++ *         Label {
++ *             text: modelData
++ *         }
++ *         color: dragMode ? "lightblue" : "lightgray"
++ *         onPressAndHold: ListView.view.ViewItems.dragMode =
++ *             !ListView.view.ViewItems.dragMode
++ *     }
++ *     ViewItems.onDragUpdated: {
++ *         if (event.status == ListItemDrag.Started) {
++ *             return;
++ *         } else if (event.status == ListItemDrag.Dropped) {
++ *             var fromData = model[event.from];
++ *             // must use a temporary variable as list manipulation
++ *             // is not working directly on model
++ *             var list = model;
++ *             list.splice(event.from, 1);
++ *             list.splice(event.to, 0, fromData);
++ *             model = list;
++ *         } else {
++ *             event.accept = false;
++ *         }
++ *     }
++ * }
++ * \endqml
++ *
++ * When using DelegateModel, it must be taken into account when implementing the
++ * \l ViewItems::dragUpdated signal handler.
++ * \qml
++ * import QtQuick 2.4
++ * import Ubuntu.Components 1.2
++ *
++ * ListView {
++ *     model: DelegateModel {
++ *         model: ["apple", "pear", "plum", "peach", "nuts", "dates"]
++ *         delegate: ListItem {
++ *             Label {
++ *                 text: modelData
++ *             }
++ *             onPressAndHold: dragMode = !dragMode;
++ *         }
++ *     }
++ *     ViewItems.onDragUpdated: {
++ *         if (event.status == ListItemDrag.Moving) {
++ *             event.accept = false
++ *         } else if (event.status == ListItemDrag.Dropped) {
++ *             var fromData = model.model[event.from];
++ *             var list = model.model;
++ *             list.splice(event.from, 1);
++ *             list.splice(event.to, 0, fromData);
++ *             model.model = list;
++ *         }
++ *     }
++ * }
++ * \endqml
++ *
++ * \sa ViewItems::dragMode, ViewItems::dragUpdated
   */
  /*!
@@ -860,11 +1041,18 @@
          // sync selectModeChanged()
          connect(d->parentAttached, SIGNAL(selectModeChanged()),
                  this, SLOT(_q_syncSelectMode()));
++        // also draggable
++        connect(d->parentAttached, SIGNAL(dragModeChanged()),
++                this, SLOT(_q_syncDragMode()));
--        // if selection mode is on, initialize style
--        if (d->parentAttached->selectMode()) {
++        // if selection or drag mode is on, initialize style, with animations turned off
++        if (d->parentAttached->selectMode() || d->parentAttached->dragMode()) {
              d->initStyleItem(false);
+         }
++        // set the object name for testing purposes
++        if (d->dragging()) {
++            setObjectName("DraggedListItem");
++        }
+     }
+ }
@@ -1006,7 +1194,7 @@
      Q_D(UCListItem);
      UCStyledItemBase::mouseMoveEvent(event);
--    if (d->selectMode()) {
++    if (d->selectMode() || d->dragMode()) {
          // no move is allowed while selectable mode is on
          return;
+     }
@@ -1183,12 +1371,12 @@
+  *
   * This grouped property configures the thin divider shown in the bottom of the
   * component. The divider is not moved together with the content when swiped left
-- * or right to reveal the actions. \c colorFrom and \c colorTo configure
++ * or right to reveal the actions. \b colorFrom and \b colorTo configure
   * the starting and ending colors of the divider. Beside these properties all Item
   * specific properties can be accessed.
+  *
-- * When \c visible is true, the ListItem's content size gets thinner with the
-- * divider's \c thickness. By default the divider is anchored to the bottom, left
++ * When \b visible is true, the ListItem's content size gets thinner with the
++ * divider's \b thickness. By default the divider is anchored to the bottom, left
   * right of the ListItem, and has a 2dp height.
   */
  UCListItemDivider* UCListItem::divider() const
@@ -1214,7 +1402,7 @@
   *  \li * it has an \l action attached
   *  \li * if the ListItem has an active child component, such as a \l Button, a
   *      \l Switch, etc.
-- *  \li * in general, if an active (enabled and visible) \c MouseArea is added
++ *  \li * in general, if an active (enabled and visible) \b MouseArea is added
   *      as a child component
   *  \li * \l clicked signal handler is implemented or there is a slot or function
   *      connected to it
@@ -1334,6 +1522,32 @@
+ }
  /*!
++ * \qmlproperty bool ListItem::dragging
++ * The property informs about an ongoing dragging on a ListItem.
++ */
++bool UCListItemPrivate::dragging()
++{
++    return !dragHandler.isNull();
++}
++
++/*!
++ * \qmlproperty bool ListItem::dragMode
++ * The property reports whether a ListItem is draggable or not. While in drag mode,
++ * the list item content cannot be swiped. The default value is false.
++ */
++bool UCListItemPrivate::dragMode()
++{
++    UCViewItemsAttachedPrivate *attached = UCViewItemsAttachedPrivate::get(parentAttached);
++    return attached ? attached->draggable : false;
++}
++void UCListItemPrivate::setDragMode(bool draggable)
++{
++    if (parentAttached) {
++        parentAttached->setDragMode(draggable);
++    }
++}
++
++/*!
+  *
   * \qmlproperty bool ListItem::selected
   * The property drives whether a list item is selected or not. Defaults to false.
@@ -1382,7 +1596,7 @@
   * of the components placed inside the list item. However, when set, the ListItem
   * will be highlighted on press.
+  *
-- * If the action set has no value type set, ListItem will set its type to \c
++ * If the action set has no value type set, ListItem will set its type to \b
   * Action.Integer and the \l {Action::triggered}{triggered} signal will be getting
   * the ListItem index as \e value parameter.
+  *
 === modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
 --- modules/Ubuntu/Components/plugin/uclistitem.h	2015-02-18 10:57:06 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitem.h	2015-02-27 07:56:03 +0000
@@ -36,6 +36,8 @@
      Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool contentMoving READ contentMoving NOTIFY contentMovingChanged)
      Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
      Q_PROPERTY(QColor highlightColor READ highlightColor WRITE setHighlightColor RESET resetHighlightColor NOTIFY highlightColorChanged)
++    Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool dragging READ dragging NOTIFY draggingChanged)
++    Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool dragMode READ dragMode WRITE setDragMode NOTIFY dragModeChanged)
      Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool selected READ isSelected WRITE setSelected NOTIFY selectedChanged)
      Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool selectMode READ selectMode WRITE setSelectMode NOTIFY selectModeChanged)
      Q_PRIVATE_PROPERTY(UCListItem::d_func(), UCAction *action READ action WRITE setAction NOTIFY actionChanged DESIGNABLE false)
@@ -80,6 +82,8 @@
      void contentMovingChanged();
      void colorChanged();
      void highlightColorChanged();
++    void draggingChanged();
++    void dragModeChanged();
      void selectedChanged();
      void selectModeChanged();
      void actionChanged();
@@ -105,6 +109,7 @@
      Q_PRIVATE_SLOT(d_func(), void _q_updateIndex())
      Q_PRIVATE_SLOT(d_func(), void _q_contentMoving())
      Q_PRIVATE_SLOT(d_func(), void _q_syncSelectMode())
++    Q_PRIVATE_SLOT(d_func(), void _q_syncDragMode())
  };
  class UCListItemDividerPrivate;
@@ -135,12 +140,14 @@
      Q_DECLARE_PRIVATE(UCListItemDivider)
  };
++class UCDragEvent;
  class UCViewItemsAttachedPrivate;
  class UCViewItemsAttached : public QObject
+ {
      Q_OBJECT
      Q_PROPERTY(bool selectMode READ selectMode WRITE setSelectMode NOTIFY selectModeChanged)
      Q_PROPERTY(QList<int> selectedIndices READ selectedIndices WRITE setSelectedIndices NOTIFY selectedIndicesChanged)
++    Q_PROPERTY(bool dragMode READ dragMode WRITE setDragMode NOTIFY dragModeChanged)
  public:
      explicit UCViewItemsAttached(QObject *owner);
      ~UCViewItemsAttached();
@@ -157,17 +164,67 @@
      void setSelectMode(bool value);
      QList<int> selectedIndices() const;
      void setSelectedIndices(const QList<int> &list);
++    bool dragMode() const;
++    void setDragMode(bool value);
++
  private Q_SLOTS:
      void unbindItem();
++    void completed();
  Q_SIGNALS:
      void selectModeChanged();
      void selectedIndicesChanged();
++    void dragModeChanged();
++
++    void dragUpdated(UCDragEvent *event);
  private:
      Q_DECLARE_PRIVATE(UCViewItemsAttached)
--    QScopedPointer<UCViewItemsAttachedPrivate> d_ptr;
  };
  QML_DECLARE_TYPEINFO(UCViewItemsAttached, QML_HAS_ATTACHED_PROPERTIES)
++class UCDragEvent : public QObject
++{
++    Q_OBJECT
++    Q_PROPERTY(Status status READ status)
++    Q_PROPERTY(int from READ from)
++    Q_PROPERTY(int to READ to)
++    Q_PROPERTY(int minimumIndex MEMBER m_minimum)
++    Q_PROPERTY(int maximumIndex MEMBER m_maximum)
++    Q_PROPERTY(bool accept MEMBER m_accept)
++    Q_ENUMS(Status)
++public:
++    enum Status {
++        Started,
++        Moving,
++        Dropped
++    };
++
++    explicit UCDragEvent(Status status, int from, int to, int min, int max)
++        : QObject(0), m_status(status), m_from(from), m_to(to), m_minimum(min), m_maximum(max), m_accept(true)
++    {}
++    int from() const
++    {
++        return m_from;
++    }
++    int to() const
++    {
++        return m_to;
++    }
++    Status status() const
++    {
++        return m_status;
++    }
++
++private:
++    Status m_status;
++    int m_from;
++    int m_to;
++    int m_minimum;
++    int m_maximum;
++    bool m_accept;
++
++    friend class ListItemDragArea;
++};
++
  #endif // UCLISTITEM_H
 === modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
 --- modules/Ubuntu/Components/plugin/uclistitem_p.h	2015-02-18 10:57:06 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2015-02-27 07:56:03 +0000
@@ -33,7 +33,7 @@
  class UCListItemDivider;
  class UCListItemActions;
  class UCListItemStyle;
--class UCActionPanel;
++class ListItemDragHandler;
  class UCListItemPrivate : public UCStyledItemBasePrivate
+ {
      Q_DECLARE_PUBLIC(UCListItem)
@@ -58,6 +58,7 @@
      void _q_updateIndex();
      void _q_contentMoving();
      void _q_syncSelectMode();
++    void _q_syncDragMode();
      int index();
      bool canHighlight(QMouseEvent *event);
      void setHighlighted(bool pressed);
@@ -83,6 +84,7 @@
      QPointer<QQuickItem> countOwner;
      QPointer<QQuickFlickable> flickable;
      QPointer<UCViewItemsAttached> parentAttached;
++    QPointer<ListItemDragHandler> dragHandler;
      QQuickItem *contentItem;
      UCListItemDivider *divider;
      UCListItemActions *leadingActions;
@@ -104,6 +106,9 @@
      void resetStyle();
      void initStyleItem(bool withAnimatedPanels = true);
      QQuickItem *styleInstance() const;
++    bool dragging();
++    bool dragMode();
++    void setDragMode(bool draggable);
      bool isSelected();
      void setSelected(bool value);
      bool selectMode();
@@ -113,11 +118,12 @@
  };
  class PropertyChange;
--class UCViewItemsAttachedPrivate
++class ListItemDragArea;
++class UCViewItemsAttachedPrivate : public QObjectPrivate
+ {
      Q_DECLARE_PUBLIC(UCViewItemsAttached)
  public:
--    UCViewItemsAttachedPrivate(UCViewItemsAttached *qq);
++    UCViewItemsAttachedPrivate();
      ~UCViewItemsAttachedPrivate();
      static UCViewItemsAttachedPrivate *get(UCViewItemsAttached *item)
@@ -132,10 +138,17 @@
      bool addSelectedItem(UCListItem *item);
      bool removeSelectedItem(UCListItem *item);
      bool isItemSelected(UCListItem *item);
++    void enterDragMode();
++    void leaveDragMode();
++    bool isDragUpdatedConnected();
++    void updateSelectedIndices(int fromIndex, int toIndex);
--    UCViewItemsAttached *q_ptr;
++    QQuickFlickable *listView;
++    ListItemDragArea *dragArea;
      bool globalDisabled:1;
      bool selectable:1;
++    bool draggable:1;
++    bool ready:1;
      QSet<int> selectedList;
      QList< QPointer<QQuickFlickable> > flickables;
      QList< PropertyChange* > changes;
 === modified file 'modules/Ubuntu/Components/plugin/uclistitemstyle.cpp'
 --- modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2015-02-13 11:51:50 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2015-02-27 07:56:03 +0000
@@ -38,6 +38,8 @@
  UCListItemStyle::UCListItemStyle(QQuickItem *parent)
      : QQuickItem(parent)
      , m_snapAnimation(0)
++    , m_dropAnimation(0)
++    , m_dragPanel(0)
      , m_animatePanels(true)
+ {
+ }
@@ -140,3 +142,16 @@
      m_animatePanels = animate;
      Q_EMIT animatePanelsChanged();
+ }
++
++/*!
++ * \qmlproperty PropertyAnimation ListItemStyle::dropAnimation
++ * The property holds the animation executed on ListItem dropping.
++ */
++
++/*!
++ * \qmlproperty Item ListItemStyle::dragPanel
++ * The property holds the item visualizing the drag handler. ListItem's dragging
++ * mechanism uses this property to detect the area the dragging can be initiated
++ * from. If not set, the ListItem will assume the dragging can be initiated from
++ * the entire area of the ListItem.
++ */
 === modified file 'modules/Ubuntu/Components/plugin/uclistitemstyle.h'
 --- modules/Ubuntu/Components/plugin/uclistitemstyle.h	2015-02-13 12:20:27 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitemstyle.h	2015-02-27 07:56:03 +0000
@@ -59,12 +59,15 @@
  class QQmlComponent;
  class QQuickAbstractAnimation;
++class QQuickPropertyAnimation;
  class QQuickBehavior;
  class UCListItemStyle : public QQuickItem
+ {
      Q_OBJECT
      Q_PROPERTY(QQuickAbstractAnimation *snapAnimation MEMBER m_snapAnimation NOTIFY snapAnimationChanged)
++    Q_PROPERTY(QQuickPropertyAnimation *dropAnimation MEMBER m_dropAnimation NOTIFY dropAnimationChanged)
      Q_PROPERTY(bool animatePanels READ animatePanels NOTIFY animatePanelsChanged)
++    Q_PROPERTY(QQuickItem *dragPanel MEMBER m_dragPanel NOTIFY dragPanelChanged)
  public:
      explicit UCListItemStyle(QQuickItem *parent = 0);
@@ -75,7 +78,9 @@
  Q_SIGNALS:
      void snapAnimationChanged();
++    void dropAnimationChanged();
      void animatePanelsChanged();
++    void dragPanelChanged();
  public Q_SLOTS:
      void swipeEvent(UCSwipeEvent *event);
@@ -89,11 +94,14 @@
      QMetaMethod m_swipeEvent;
      QMetaMethod m_rebound;
      QQuickAbstractAnimation *m_snapAnimation;
++    QQuickPropertyAnimation *m_dropAnimation;
++    QQuickItem *m_dragPanel;
      bool m_animatePanels:1;
      friend class UCListItemPrivate;
--    friend class UCActionPanel;
--    friend class ListItemAnimator;
++    friend class ListItemDragArea;
++    friend class ListItemDragHandler;
++    friend class UCViewItemsAttachedPrivate;
  };
  #endif // UCLISTITEMSTYLE_H
 === modified file 'modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp'
 --- modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp	2015-02-13 12:20:27 +0000
 +++ modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp	2015-02-27 07:56:03 +0000
@@ -19,8 +19,79 @@
  #include "uclistitem.h"
  #include "uclistitem_p.h"
  #include "propertychange_p.h"
++#include "quickutils.h"
++#include "i18n.h"
  #include "uclistitemstyle.h"
++#include "privates/listitemdragarea.h"
  #include <QtQuick/private/qquickflickable_p.h>
++#include <QtQml/private/qqmlcomponentattached_p.h>
++#include <QtQml/QQmlInfo>
++#include <QtCore/QAbstractItemModel>
++#include <QtQml/private/qqmlobjectmodel_p.h>
++#include <QtQml/private/qqmldelegatemodel_p.h>
++
++/*!
++ * \qmltype ListItemDrag
++ * \inqmlmodule Ubuntu.Components 1.2
++ * \ingroup unstable-ubuntu-listitems
++ * \since Ubuntu.Components 1.2
++ * \brief Provides information about a ListItem drag event.
++ *
++ * The object cannot be instantiated and it is passed as parameter to \l ViewItems::dragUpdated
++ * attached signal. Developer can decide whether to accept or restrict the dragging
++ * event based on the input provided by this event.
++ *
++ * The direction of the drag can be found via the \l status property and the
++ * source and destination the drag can be applied via \l from and \l to properties.
++ * The allowed directions can be configured through \l minimumIndex and \l maximumIndex
++ * properties, and the event acceptance through \l accept property. If the event is not
++ * accepted, the drag action will be considered as cancelled.
++ */
++
++/*!
++ * \qmlproperty enum ListItemDrag::status
++ * \readonly
++ * The property provides information about the status of the drag. Its value can
++ * be one of the following:
++ * \list
++ *  \li \b ListItemDrag.Started - indicates that the dragging is about to start,
++ *              giving opportunities to define restrictions on the dragging indexes,
++ *              like \l minimumIndex, \l maximumIndex
++ *  \li \b ListItemDrag.Moving - the dragged item is moved upwards or downwards
++ *              in the ListItem
++ *  \li \b ListItemDrag.Dropped - indicates that the drag event is finished, and
++ *              the dragged item is about to be dropped to the given position.
++ * \endlist
++ */
++
++/*!
++ * \qmlproperty int ListItemDrag::from
++ * \readonly
++ * Specifies the source index the ListItem is dragged from.
++ */
++/*!
++ * \qmlproperty int ListItemDrag::to
++ * \readonly
++ *
++ * Specifies the index the ListItem is dragged to or dropped.
++ */
++
++/*!
++ * \qmlproperty int ListItemDrag::maximumIndex
++ */
++/*!
++ * \qmlproperty int ListItemDrag::minimumIndex
++ * These properties configure the minimum and maximum indexes the item can be
++ * dragged. The properties can be set in \l ViewItems::dragUpdated signal.
++ * A negative value means no restriction defined on the dragging interval side.
++ */
++
++/*!
++ * \qmlproperty bool ListItemDrag::accept
++ * The property can be used to dismiss the event. By default its value is true,
++ * meaning the drag event is accepted. The value of false blocks the drag event
++ * to be handled by the ListItem's dragging mechanism.
++ */
  /*
   * The properties are attached to the ListItem's parent item or to its closest
@@ -29,10 +100,14 @@
   * in this way the controlling of the interactive flag of the Flickable and all
   * its ascendant Flickables.
   */
--UCViewItemsAttachedPrivate::UCViewItemsAttachedPrivate(UCViewItemsAttached *qq)
--    : q_ptr(qq)
++UCViewItemsAttachedPrivate::UCViewItemsAttachedPrivate()
++    : QObjectPrivate()
++    , listView(0)
++    , dragArea(0)
      , globalDisabled(false)
      , selectable(false)
++    , draggable(false)
++    , ready(false)
+ {
+ }
@@ -47,9 +122,12 @@
+ {
      Q_Q(UCViewItemsAttached);
      Q_FOREACH(const QPointer<QQuickFlickable> &flickable, flickables) {
--        if (flickable.data())
--        QObject::disconnect(flickable.data(), &QQuickFlickable::movementStarted,
--                            q, &UCViewItemsAttached::unbindItem);
++        if (flickable.data()) {
++            QObject::disconnect(flickable.data(), &QQuickFlickable::movementStarted,
++                                q, &UCViewItemsAttached::unbindItem);
++            QObject::disconnect(flickable.data(), &QQuickFlickable::flickStarted,
++                                q, &UCViewItemsAttached::unbindItem);
++        }
+     }
      flickables.clear();
+ }
@@ -68,6 +146,8 @@
          if (flickable) {
              QObject::connect(flickable, &QQuickFlickable::movementStarted,
                               q, &UCViewItemsAttached::unbindItem);
++            QObject::connect(flickable, &QQuickFlickable::flickStarted,
++                             q, &UCViewItemsAttached::unbindItem);
              flickables << flickable;
+         }
          item = item->parentItem();
@@ -109,13 +189,18 @@
   * \since Ubuntu.Components 1.2
   * \brief A set of properties attached to the ListItem's parent item or ListView.
+  *
-- * These properties are attached to the parent item of the ListItem, or to
-- * ListView, when the component is used as delegate.
++ * These properties are automatically attached to the parent item of the ListItem,
++ * or to ListView, when the component is used as delegate.
   */
  UCViewItemsAttached::UCViewItemsAttached(QObject *owner)
--    : QObject(owner)
--    , d_ptr(new UCViewItemsAttachedPrivate(this))
++    : QObject(*(new UCViewItemsAttachedPrivate()), owner)
+ {
++    if (owner->inherits("QQuickListView")) {
++        d_func()->listView = static_cast<QQuickFlickable*>(owner);
++    }
++    // listen readyness
++    QQmlComponentAttached *attached = QQmlComponent::qmlAttachedProperties(owner);
++    connect(attached, &QQmlComponentAttached::completed, this, &UCViewItemsAttached::completed);
+ }
  UCViewItemsAttached::~UCViewItemsAttached()
@@ -214,6 +299,18 @@
      d->clearFlickablesList();
+ }
++// reports completion, and in case the dragMode is turned on, enters drag mode
++void UCViewItemsAttached::completed()
++{
++    Q_D(UCViewItemsAttached);
++    d->ready = true;
++    if (d->draggable) {
++        d->enterDragMode();
++    } else {
++        d->leaveDragMode();
++    }
++}
++
  /*!
   * \qmlattachedproperty bool ViewItems::selectMode
   * The property drives whether list items are selectable or not.
@@ -265,7 +362,7 @@
      int index = UCListItemPrivate::get(item)->index();
      if (!selectedList.contains(index)) {
          selectedList.insert(index);
--        Q_EMIT q_ptr->selectedIndicesChanged();
++        Q_EMIT q_func()->selectedIndicesChanged();
          return true;
+     }
      return false;
@@ -273,7 +370,7 @@
  bool UCViewItemsAttachedPrivate::removeSelectedItem(UCListItem *item)
+ {
      if (selectedList.remove(UCListItemPrivate::get(item)->index()) > 0) {
--        Q_EMIT q_ptr->selectedIndicesChanged();
++        Q_EMIT q_func()->selectedIndicesChanged();
          return true;
+     }
      return false;
@@ -283,3 +380,234 @@
+ {
      return selectedList.contains(UCListItemPrivate::get(item)->index());
+ }
++
++/*!
++ * \qmlattachedproperty bool ViewItems::dragMode
++ * The property drives the dragging mode of the ListItems within a ListView. It
++ * has no effect on any other parent of the ListItem.
++ *
++ * When set, ListItem content will be disabled and a panel will be shown enabling
++ * the dragging mode. The items can be dragged by dragging this handler only.
++ * The feature can be activated same time with \l ListItem::selectMode.
++ *
++ * The panel is configured by the style.
++ *
++ * \sa ListItemStyle, dragUpdated
++ */
++
++/*!
++ * \qmlattachedsignal ViewItems::dragUpdated(ListItemDrag event)
++ * The signal is emitted whenever a dragging related event occurrs. The \b event.status
++ * specifies the dragging event type. Depending on the type, the ListItemDrag event
++ * properties will have the following meaning:
++ * \table
++ * \header
++ *  \li status
++ *  \li from
++ *  \li to
++ *  \li minimumIndex
++ *  \li maximumIndex
++ * \row
++ *  \li Started
++ *  \li the index of the item to be dragged
++ *  \li -1
++ *  \li default (-1), can be changed to restrict moves
++ *  \li default (-1), can be changed to restrict moves
++ * \row
++ *  \li Moving
++ *  \li source index from where the item dragged from
++ *  \li destination index where the item can be dragged to
++ *  \li the same value set at \e Started, can be changed
++ *  \li the same value set at \e Started, can be changed
++ * \row
++ *  \li Dropped
++ *  \li source index from where the item dragged from
++ *  \li destination index where the item can be dragged to
++ *  \li the value set at \e Started/Moving, changes are omitted
++ *  \li the value set at \e Started/Moving, changes are omitted
++ * \endtable
++ * Implementations \b {must move the model data} in order to re-order the ListView
++ * content. If the move is not acceptable, it must be cancelled by setting
++ * \b event.accept to \e false, in which case the dragged index (\b from) will
++ * not be updated and next time the signal is emitted will be the same.
++ *
++ * An example implementation of a live dragging with restrictions:
++ * \qml
++ * import QtQuick 2.4
++ * import Ubuntu.Components 1.2
++ *
++ * ListView {
++ *     width: units.gu(40)
++ *     height: units.gu(40)
++ *     model: ListModel {
++ *         // initiate with random data
++ *     }
++ *     delegate: ListItem {
++ *         // content
++ *     }
++ *
++ *     ViewItems.dragMode: true
++ *     ViewItems.onDragUpdated: {
++ *         if (event.status == ListViewDrag.Started) {
++ *             if (event.from < 5) {
++ *                 // deny dragging on the first 5 element
++ *                 event.accept = false;
++ *             } else if (event.from >= 5 && event.from <= 10 &&
++ *                        event.to >= 5 && event.to <= 10) {
++ *                 // specify the interval
++ *                 event.minimumIndex = 5;
++ *                 event.maximumIndex = 10;
++ *             } else if (event.from > 10) {
++ *                 // prevent dragging to the first 11 items area
++ *                 event.minimumIndex = 11;
++ *             }
++ *         } else {
++ *             model.move(event.from, event.to, 1);
++ *         }
++ *     }
++ * }
++ * \endqml
++ *
++ * A drag'n'drop implementation might be required when model changes are too
++ * expensive, and continuously updating while dragging would cause lot of traffic.
++ * The following example illustrates how to implement such a scenario:
++ * \qml
++ * import QtQuick 2.4
++ * import Ubuntu.Components 1.2
++ *
++ * ListView {
++ *    width: units.gu(40)
++ *    height: units.gu(40)
++ *    model: ListModel {
++ *        // initiate with random data
++ *    }
++ *    delegate: ListItem {
++ *        // content
++ *    }
++ *
++ *    ViewItems.dragMode: true
++ *    ViewItems.onDragUpdated: {
++ *        if (event.direction == ListItemDrag.Dropped) {
++ *            // this is the last event, so drop the item
++ *            model.move(event.from, event.to, 1);
++ *        } else if (event.direction != ListItemDrag.Started) {
++ *            // do not accept the moving events, so drag.from will
++ *            // always contain the original drag index
++ *            event.accept = false;
++ *        }
++ *    }
++ * }
++ * \endqml
++ *
++ * \note Do not forget to set \b{event.accept} to false in \b dragUpdated in
++ * case the drag event handling is not accepted, otherwise the system will not
++ * know whether the move has been performed or not, and selected indexes will
++ * not be synchronized properly.
++ */
++bool UCViewItemsAttached::dragMode() const
++{
++    Q_D(const UCViewItemsAttached);
++    return d->draggable;
++}
++void UCViewItemsAttached::setDragMode(bool value)
++{
++    Q_D(UCViewItemsAttached);
++    if (d->draggable == value) {
++        return;
++    }
++    if (value) {
++        /*
++         * The dragging works only if the ListItem is used inside a ListView, and the
++         * model used is a list, a ListModel or a derivate of QAbstractItemModel. Do
++         * not enable dragging if these conditions are not fulfilled.
++         */
++        if (!d->listView) {
++            qmlInfo(parent()) << UbuntuI18n::instance().tr("Dragging mode requires ListView");
++            return;
++        }
++        QVariant model = d->listView->property("model");
++        // warn if the model is anything else but Instance model (ObjectModel or DelegateModel)
++        // or a derivate of QAbstractItemModel
++        QString warning = UbuntuI18n::instance().tr("Dragging is only supported when using a QAbstractItemModel, ListModel or list.");
++        if (model.isValid() && !model.value<QQmlInstanceModel*>() && !model.value<QAbstractItemModel*>() && !(model.type() == QVariant::List)) {
++            qmlInfo(parent()) << warning;
++        }
++        // if we have a QQmlDelegateModel we must also check the model property of it
++        QQmlDelegateModel *delegateModel = model.value<QQmlDelegateModel*>();
++        if (delegateModel && delegateModel->model().isValid() &&
++                             !delegateModel->model().value<QAbstractItemModel*>() &&
++                             !(delegateModel->model().type() == QVariant::List)) {
++            qmlInfo(parent()) << warning;
++        }
++    }
++    d->draggable = value;
++    if (d->draggable) {
++        d->enterDragMode();
++    } else {
++        d->leaveDragMode();
++    }
++    Q_EMIT dragModeChanged();
++}
++
++void UCViewItemsAttachedPrivate::enterDragMode()
++{
++    if (dragArea) {
++        dragArea->reset();
++        return;
++    }
++    dragArea = new ListItemDragArea(listView);
++    dragArea->init();
++}
++
++void UCViewItemsAttachedPrivate::leaveDragMode()
++{
++    if (dragArea) {
++        dragArea->setEnabled(false);
++    }
++}
++
++// returns true when the dragUpdated signal handler is implemented or a function is connected to it
++bool UCViewItemsAttachedPrivate::isDragUpdatedConnected()
++{
++    Q_Q(UCViewItemsAttached);
++    static QMetaMethod method = QMetaMethod::fromSignal(&UCViewItemsAttached::dragUpdated);
++    static int signalIdx = QMetaObjectPrivate::signalIndex(method);
++    return QObjectPrivate::get(q)->isSignalConnected(signalIdx);
++}
++
++// updates the selected indices list in ViewAttached which is changed due to dragging
++void UCViewItemsAttachedPrivate::updateSelectedIndices(int fromIndex, int toIndex)
++{
++    if (selectedList.count() == listView->property("count").toInt()) {
++        // all indices selected, no need to reorder
++        return;
++    }
++
++    Q_Q(UCViewItemsAttached);
++    bool isFromSelected = selectedList.contains(fromIndex);
++    if (isFromSelected) {
++        selectedList.remove(fromIndex);
++        Q_EMIT q->selectedIndicesChanged();
++    }
++    // direction is -1 (forwards) or 1 (backwards)
++    int direction = (fromIndex < toIndex) ? -1 : 1;
++    int i = (direction < 0) ? fromIndex + 1 : fromIndex - 1;
++    // loop thru the selectedIndices and fix all indices
++    while (1) {
++        if (((direction < 0) && (i > toIndex)) ||
++            ((direction > 0) && (i < toIndex))) {
++            break;
++        }
++
++        if (selectedList.contains(i)) {
++            selectedList.remove(i);
++            selectedList.insert(i + direction);
++            Q_EMIT q->selectedIndicesChanged();
++        }
++        i -= direction;
++    }
++    if (isFromSelected) {
++        selectedList.insert(toIndex);
++        Q_EMIT q->selectedIndicesChanged();
++    }
++}
 === modified file 'modules/Ubuntu/Test/UbuntuTestCase.qml'
 --- modules/Ubuntu/Test/UbuntuTestCase.qml	2014-10-29 09:25:55 +0000
 +++ modules/Ubuntu/Test/UbuntuTestCase.qml	2015-02-27 07:56:03 +0000
@@ -230,4 +230,11 @@
              keyClick(string[i]);
+         }
+     }
++
++    /*!
++      Warning message formatter, uses file name, line and column numbers to build up the message.
++      */
++    function warningFormat(line, column, message) {
++        return util.callerFile() + ":" + line + ":" + column + ": " + message;
++    }
+ }
 === modified file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml'
 --- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml	2015-02-12 07:31:08 +0000
 +++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml	2015-02-27 07:56:03 +0000
@@ -22,9 +22,6 @@
      height: units.gu(60)
      objectName: "mainView"
--    // make sure we're not messed up by the deprecated toolbar
--    useDeprecatedToolbar: false
--
      Page {
          id: testPage
          objectName: "test_page"
 === added file 'tests/resources/listitems/ListItemDragging.qml'
 --- tests/resources/listitems/ListItemDragging.qml	1970-01-01 00:00:00 +0000
 +++ tests/resources/listitems/ListItemDragging.qml	2015-02-27 07:56:03 +0000
@@ -0,0 +1,174 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.4
++import Ubuntu.Components 1.2
++import Ubuntu.Components.ListItems 1.0
++import QtQml.Models 2.1
++
++MainView {
++    id: main
++    width: units.gu(40)
++    height: units.gu(71)
++
++    property bool restrictDragging: true
++
++    Action {
++        id: deleteAction
++        iconName: "delete"
++    }
++    property list<Action> contextualActions: [
++        Action {
++            iconName: "edit"
++        },
++        Action {
++            iconName: "share"
++        },
++        Action {
++            iconName: "stock_website"
++        }
++    ]
++    Tabs {
++        Tab {
++            title: "Dragging with ListModel"
++            page: Page {
++                ListView {
++                    onEnabledChanged: print("enabled", enabled)
++                    anchors.fill: parent
++                    ViewItems.selectMode: ViewItems.dragMode
++                    ViewItems.onSelectedIndicesChanged: print(ViewItems.selectedIndices)
++
++                    function handleDragStarted(event) {
++                        if (!restrictDragging) {
++                            return;
++                        }
++
++                        if (event.from < 3) {
++                            // the first 3 items are not draggable
++                            event.accept = false;
++                        } else if (event.from >=3 && event.from <= 10) {
++                            // dragging is limited between index 3 and 10
++                            event.minimumIndex = 3;
++                            event.maximumIndex = 10;
++                        } else {
++                            // prevent dragging above index 10
++                            event.minimumIndex = 11;
++                        }
++                    }
++                    function handleDragUpdates(event) {
++                        if (restrictDragging) {
++                            // deal only with indexes >= 3
++                            if (event.to >= 3 && event.to <= 10 && event.from >= 3 && event.from <= 10) {
++                                // live update
++                                model.move(event.from, event.to, 1);
++                            } else if (event.status == ListItemDrag.Dropped) {
++                                model.move(event.from, event.to, 1);
++                            } else {
++                                event.accept = false;
++                            }
++                        } else {
++                            // no restrictions, perform live update
++                            model.move(event.from, event.to, 1);
++                        }
++                    }
++
++                    ViewItems.onDragUpdated: {
++                        if (event.status == ListItemDrag.Started) {
++                            handleDragStarted(event);
++                        } else {
++                            handleDragUpdates(event);
++                        }
++                    }
++
++                    model: ListModel {
++                        Component.onCompleted: {
++                            for (var i = 0; i < 3; i++) {
++                                append({label: "List item #"+i, sectionData: "Locked"});
++                            }
++                            for (i = 3; i < 11; i++) {
++                                append({label: "List item #"+i, sectionData: "Limited, live move"});
++                            }
++                            for (i = 11; i < 25; i++) {
++                                append({label: "List item #"+i, sectionData: "Unlimited, drag'n'drop"});
++                            }
++                        }
++                    }
++
++                    section {
++                        property: "sectionData"
++                        criteria: ViewSection.FullString
++                        delegate: Header {
++                            text: section
++                        }
++                    }
++
++                    moveDisplaced: Transition {
++                        UbuntuNumberAnimation {
++                            properties: "x,y"
++                        }
++                    }
++
++                    delegate: ListItem {
++                        id: item
++                        objectName: "ListItem-" + index
++                        leadingActions: ListItemActions {
++                            actions: deleteAction
++                        }
++                        trailingActions: ListItemActions {
++                            actions: contextualActions
++                        }
++
++                        Rectangle {
++                            anchors.fill: parent
++                            color: item.dragging ? UbuntuColors.blue : "#69aa69"
++                        }
++                        Label {
++                            text: label + " from index #" + index
++                        }
++
++                        onPressAndHold: {
++                            print("entering/leaving draggable mode")
++                            ListView.view.ViewItems.dragMode = !ListView.view.ViewItems.dragMode;
++                        }
++                    }
++                }
++            }
++        }
++        Tab {
++            title: "Using DelegateModel"
++            page: Page {
++                ListView {
++                    anchors.fill: parent
++                    model: DelegateModel {
++                        model: ["apple", "pear", "plum", "peach", "nuts", "dates"]
++                        delegate: ListItem { Label { text: modelData } onPressAndHold: dragMode = !dragMode; }
++                    }
++                    ViewItems.onDragUpdated: {
++                        if (event.status == ListItemDrag.Moving) {
++                            event.accept = false
++                        } else if (event.status == ListItemDrag.Dropped) {
++                            var fromData = model.model[event.from];
++                            var list = model.model;
++                            list.splice(event.from, 1);
++                            list.splice(event.to, 0, fromData);
++                            model.model = list;
++                        }
++                    }
++                }
++            }
++        }
++    }
++}
 === modified file 'tests/resources/listitems/ListItemTest.qml'
 --- tests/resources/listitems/ListItemTest.qml	2015-02-12 14:35:51 +0000
 +++ tests/resources/listitems/ListItemTest.qml	2015-02-27 07:56:03 +0000
@@ -22,7 +22,6 @@
      id: main
      width: units.gu(50)
      height: units.gu(105)
--    useDeprecatedToolbar: false
      property bool override: false
 === modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
 --- tests/unit_x11/tst_components/tst_listitem.qml	2015-02-19 10:10:53 +0000
 +++ tests/unit_x11/tst_components/tst_listitem.qml	2015-02-27 07:56:03 +0000
@@ -1,5 +1,5 @@
  /*
-- * Copyright 2014 Canonical Ltd.
++ * Copyright 2014-2015 Canonical Ltd.
+  *
   * This program is free software; you can redistribute it and/or modify
   * it under the terms of the GNU Lesser General Public License as published by
@@ -14,11 +14,12 @@
   * along with this program.  If not, see <http://www.gnu.org/licenses/>.
   */
--import QtQuick 2.0
++import QtQuick 2.4
  import QtTest 1.0
  import Ubuntu.Test 1.0
  import Ubuntu.Components 1.2
  import Ubuntu.Components.Styles 1.2
++import QtQml.Models 2.1
  Item {
      id: main
@@ -56,6 +57,16 @@
      ListItemActions {
          id: actionsDefault
+     }
++    ListModel {
++        id: objectModel
++        function reset() {
++            clear();
++            for (var i = 0; i < 25; i++) {
++                append({data: i});
++            }
++        }
++        Component.onCompleted: reset()
++    }
      Component {
          id: customDelegate
@@ -107,23 +118,22 @@
              width: parent.width
              height: units.gu(28)
              clip: true
--            model: 10
++            model: objectModel
              ViewItems.selectMode: false
              delegate: ListItem {
                  objectName: "listItem" + index
                  color: "lightgray"
--                width: parent.width
                  leadingActions: leading
                  trailingActions: trailing
                  Label {
--                    text: "Data " + index
++                    text: "Data: " + modelData + " @" + index
+                 }
+             }
+         }
          Flickable {
              id: testFlickable
              width: parent.width
--            height: units.gu(28)
++            height: units.gu(21)
              ListView {
                  id: nestedListView
                  width: parent.width
@@ -209,12 +219,60 @@
              flick(item, x, y, dx, dy, 0, 0, undefined, undefined, 100);
+         }
++        SignalSpy {
++            id: dropSpy
++            signalName: "stopped"
++        }
++
++        function toggleDragMode(view, enabled) {
++            // use the topmost listItem to wait for rendering completion
++            view.positionViewAtBeginning();
++            var listItem = findChild(view, "listItem0");
++            verify(listItem);
++            view.ViewItems.dragMode = enabled;
++            // waitForRendering aint seems to be reliable here, so we wait ~400 msecs
++            wait(400);
++        }
++
++        function drag(view, from, to) {
++            var dragArea = findChild(view, "drag_area");
++            verify(dragArea, "Cannot locate drag area");
++
++            // grab the source item
++            view.positionViewAtBeginning(from,ListView.Beginning);
++            var panel = findChild(view, "drag_panel" + from);
++            verify(panel, "Cannot locate source panel");
++            var dragPos = dragArea.mapFromItem(panel, centerOf(panel).x, centerOf(panel).y);
++            // move the mouse
++            var dy = Math.abs(to - from) * panel.height + units.gu(1);
++            dy *= (to > from) ? 1 : -1;
++            mousePress(dragArea, dragPos.x, dragPos.y);
++            wait(100);
++            var draggedItem = findChild(view.contentItem, "DraggedListItem");
++            if (draggedItem) {
++                dropSpy.target = draggedItem.__styleInstance.dropAnimation;
++            }
++            // use 10 steps to be sure the move is properly detected by the drag area
++            mouseMoveSlowly(dragArea, dragPos.x, dragPos.y, 0, dy, 10, 100);
++            // drop it, needs two mouse releases, this generates the Drop event also
++            mouseRelease(dragArea, dragPos.x, dragPos.y + dy);
++            // needs one more mouse release
++            mouseRelease(dragArea, dragPos.x, dragPos.y + dy);
++            if (dropSpy.target) {
++                dropSpy.wait();
++            } else {
++                // draggedItem cannot be found, we might be trying to drag a restricted item
++                wait(200);
++            }
++        }
++
          function initTestCase() {
              TestExtras.registerTouchDevice();
              waitForRendering(main);
+         }
          function cleanup() {
++            listView.model = objectModel;
              testItem.action = null;
              testItem.contentItem.anchors.margins = 0;
              testItem.selected = false;
@@ -231,6 +289,7 @@
              interactiveSpy.clear();
              listView.interactive = true;
              listView.ViewItems.selectMode = false;
++            listView.ViewItems.dragMode = false;
              // make sure we collapse
              mouseClick(defaults, 0, 0)
              movingSpy.target = null;
@@ -265,6 +324,7 @@
              compare(defaults.selectMode, false, "Not selectable by default");
              compare(testColumn.ViewItems.selectMode, false, "The parent attached property is not selectable by default");
              compare(testColumn.ViewItems.selectedIndices.length, 0, "No item is selected by default");
++            compare(listView.ViewItems.dragMode, false, "Drag mode is off on ListView");
              compare(actionsDefault.delegate, null, "ListItemActions has no delegate set by default.");
              compare(actionsDefault.actions.length, 0, "ListItemActions has no actions set.");
@@ -914,5 +974,235 @@
              wait(400);
              verify(panel, "Selection panel not found, wrong attached property target?");
+         }
++
++        function test_dragmode_availability_data() {
++            return [
++                {tag: "Attached to Column", item: testColumn, lookupOn: testItem, xfail: true},
++                {tag: "Attached to ListView", item: listView, lookupOn: findChild(listView, "listItem0"), xfail: false},
++            ];
++        }
++        function test_dragmode_availability(data) {
++            if (data.xfail) {
++                ignoreWarning(warningFormat(80, 5, "QML Column: Dragging mode requires ListView"));
++            }
++            data.item.ViewItems.dragMode = true;
++            wait(400);
++            var panel = findChild(data.lookupOn, "drag_panel0");
++            if (data.xfail) {
++                expectFailContinue(data.tag, "There should be no drag handler shown!")
++            }
++            verify(panel, "No drag handler found!");
++        }
++
++        function test_drag_data() {
++            return [
++                {tag: "Live 0->1 OK", live: true, from: 0, to: 1, count: 1, accept: true, indices:[1,0,2,3,4]},
++                {tag: "Live 0->2 OK", live: true, from: 0, to: 2, count: 2, accept: true, indices:[1,2,0,3,4]},
++                {tag: "Live 0->3 OK", live: true, from: 0, to: 3, count: 3, accept: true, indices:[1,2,3,0,4]},
++                {tag: "Live 3->0 OK", live: true, from: 3, to: 0, count: 3, accept: true, indices:[3,0,1,2,4]},
++                        // do not accept moves
++                {tag: "Live 0->1 NOK", live: true, from: 0, to: 1, count: 0, accept: false, indices:[0,1,2,3,4]},
++                {tag: "Live 0->2 NOK", live: true, from: 0, to: 2, count: 0, accept: false, indices:[0,1,2,3,4]},
++                {tag: "Live 0->3 NOK", live: true, from: 0, to: 3, count: 0, accept: false, indices:[0,1,2,3,4]},
++                {tag: "Live 3->0 NOK", live: true, from: 3, to: 0, count: 0, accept: false, indices:[0,1,2,3,4]},
++
++                        // non-live updates
++                {tag: "Drop 0->1 OK", live: false, from: 0, to: 1, count: 1, accept: true, indices:[1,0,2,3,4]},
++                {tag: "Drop 0->2 OK", live: false, from: 0, to: 2, count: 1, accept: true, indices:[1,2,0,3,4]},
++                {tag: "Drop 0->3 OK", live: false, from: 0, to: 3, count: 1, accept: true, indices:[1,2,3,0,4]},
++                {tag: "Drop 3->0 OK", live: false, from: 3, to: 0, count: 1, accept: true, indices:[3,0,1,2,4]},
++                        // do not accept moves
++                {tag: "Drop 0->1 NOK", live: false, from: 0, to: 1, count: 0, accept: false, indices:[0,1,2,3,4]},
++                {tag: "Drop 0->2 NOK", live: false, from: 0, to: 2, count: 0, accept: false, indices:[0,1,2,3,4]},
++                {tag: "Drop 0->3 NOK", live: false, from: 0, to: 3, count: 0, accept: false, indices:[0,1,2,3,4]},
++                {tag: "Drop 3->0 NOK", live: false, from: 3, to: 0, count: 0, accept: false, indices:[0,1,2,3,4]},
++            ];
++        }
++
++        function test_drag(data) {
++            var moveCount = 0;
++            function liveUpdate(event) {
++                if (event.status == ListItemDrag.Started) {
++                    return;
++                }
++                if (data.accept) {
++                    moveCount++;
++                    listView.model.move(event.from, event.to, 1);
++                }
++                event.accept = data.accept;
++            }
++            function singleDrop(event) {
++                if (event.status == ListItemDrag.Dropped) {
++                    if (data.accept) {
++                        moveCount++;
++                        listView.model.move(event.from, event.to, 1);
++                    }
++                    event.accept = data.accept;
++                } else if (event.status == ListItemDrag.Moving) {
++                    event.accept = false;
++                }
++            }
++
++            objectModel.reset();
++            waitForRendering(listView);
++            listView.positionViewAtBeginning();
++            var func = data.live ? liveUpdate : singleDrop;
++            listView.ViewItems.dragUpdated.connect(func);
++
++            // enter drag mode
++            toggleDragMode(listView, true);
++            drag(listView, data.from, data.to);
++            compare(moveCount, data.count, "Move did not happen or more than one item was moved");
++            // compare array indices
++            for (var i in data.indices) {
++                compare(listView.model.get(i).data, data.indices[i], "data at index " + i + " is not the expected one");
++            }
++
++            // cleanup
++            listView.ViewItems.dragUpdated.disconnect(func);
++            toggleDragMode(listView, false);
++        }
++
++        // preconditions:
++        // the first 2 items cannot be dragged anywhere, nothing can be dropped in this area
++        // the 3-> items can be interchanged in between, cannot be dragged outside
++        function test_drag_restricted_data() {
++            return [
++                {tag: "[0,1] locked, drag 0->1 NOK", from: 0, to: 1, count: 0, indices: [0,1,2,3,4]},
++                {tag: "[0,1] locked, drag 1->2 NOK", from: 1, to: 2, count: 0, indices: [0,1,2,3,4]},
++                {tag: "[0,1] locked, drag 2->1 NOK", from: 2, to: 1, count: 0, indices: [0,1,2,3,4]},
++                {tag: "[0,1] locked, drag 2->0 NOK", from: 2, to: 0, count: 0, indices: [0,1,2,3,4]},
++                        // drag
++                {tag: "[0,1] locked, drag 2->3 OK", from: 2, to: 3, count: 1, indices: [0,1,3,2,4]},
++            ];
++        }
++        function test_drag_restricted(data) {
++            var moveCount = 0;
++            function updateHandler(event) {
++                if (event.status == ListItemDrag.Started) {
++                    if (event.from < 2) {
++                        event.accept = false;
++                    } else {
++                        event.minimumIndex = 2;
++                    }
++                } else if (event.status == ListItemDrag.Moving) {
++                    listView.model.move(event.from, event.to, 1);
++                    moveCount++;
++                }
++            }
++
++            objectModel.reset();
++            waitForRendering(listView);
++            listView.positionViewAtBeginning();
++            listView.ViewItems.dragUpdated.connect(updateHandler);
++
++            // enter drag mode
++            toggleDragMode(listView, true);
++            drag(listView, data.from, data.to);
++            compare(moveCount, data.count, "Move did not happen or more than one item was moved");
++            // compare array indices
++            for (var i in data.indices) {
++                compare(listView.model.get(i).data, data.indices[i], "data at index " + i + " is not the expected one");
++            }
++
++            // cleanup
++            listView.ViewItems.dragUpdated.disconnect(updateHandler);
++            toggleDragMode(listView, false);
++        }
++
++        function test_drag_keeps_selected_indexes_data() {
++            return [
++                {tag: "[0,1,2] selected, move 0->3, live", selected: [0,1,2], from: 0, to: 3, expected: [0,1,3], live: true},
++                {tag: "[1,2] selected, move 3->2, live", selected: [1,2], from: 3, to: 2, expected: [1,3], live: true},
++                {tag: "[1,2] selected, move 0->3, live", selected: [1,2], from: 0, to: 3, expected: [0,1], live: true},
++                {tag: "[1,2] selected, move 3->0, live", selected: [1,2], from: 3, to: 0, expected: [2,3], live: true},
++                // non-live updates
++                {tag: "[0,1,2] selected, move 0->3, non-live", selected: [0,1,2], from: 0, to: 3, expected: [0,1,3], live: false},
++                {tag: "[1,2] selected, move 3->2, non-live", selected: [1,2], from: 3, to: 2, expected: [1,3], live: false},
++                {tag: "[1,2] selected, move 0->3, non-live", selected: [1,2], from: 0, to: 3, expected: [0,1], live: false},
++                {tag: "[1,2] selected, move 3->0, non-live", selected: [1,2], from: 3, to: 0, expected: [2,3], live: false},
++            ];
++        }
++        function test_drag_keeps_selected_indexes(data) {
++            function updateHandler(event) {
++                if (event.status == ListItemDrag.Started) {
++                    return;
++                }
++                if (data.live || event.status == ListItemDrag.Dropped) {
++                    listView.model.move(event.from, event.to, 1);
++                } else {
++                    event.accept = false;
++                }
++            }
++            objectModel.reset();
++            waitForRendering(listView);
++            listView.ViewItems.selectedIndices = data.selected;
++            listView.ViewItems.dragUpdated.connect(updateHandler);
++            toggleDragMode(listView, true);
++            drag(listView, data.from, data.to);
++            listView.ViewItems.dragUpdated.disconnect(updateHandler);
++            toggleDragMode(listView, false);
++
++            // NOTE: the selected indexes order is arbitrar and cannot be predicted by the test
++            // therefore we check the selected indexes presence in the expected list.
++            compare(listView.ViewItems.selectedIndices.length, data.expected.length, "The selected indexes and expected list size differs");
++            for (var i = 0; i < listView.ViewItems.selectedIndices.length; i++) {
++                var index = data.expected.indexOf(listView.ViewItems.selectedIndices[i]);
++                verify(index >= 0, "Index " + listView.ViewItems.selectedIndices[i] + " is not expected to be selected!");
++            }
++        }
++
++        // must run this immediately after the defaults are checked otherwise drag handler connected check will fail
++        function test_1_warn_missing_dragUpdated_signal_handler() {
++            ignoreWarning(warningFormat(116, 9, "QML ListView: ListView has no ViewItems.dragUpdated() signal handler implemented. No dragging will be possible."));
++            toggleDragMode(listView, true);
++            drag(listView, 0, 1);
++            toggleDragMode(listView, true);
++        }
++
++        DelegateModel {
++            id: delegateModel
++            delegate: ListItem {
++                objectName: "listItem" + index
++                Label { text: modelData }
++            }
++        }
++        ObjectModel {
++            id: objectModel2
++            Repeater {
++                model: 3
++                ListItem {
++                    objectName: "listItem" + index
++                    Label { text: modelData }
++                }
++            }
++        }
++        function test_warn_model_data() {
++            var list = [1,2,3,4,5,6,7,8,9,10];
++            return [
++                {tag: "number", model: 20, warning: "Dragging is only supported when using a QAbstractItemModel, ListModel or list."},
++                {tag: "list", model: list, warning: ""},
++                {tag: "ListModel", model: objectModel, warning: ""},
++                {tag: "DelegateModel with number", model: delegateModel, modelModel: 20, warning: "Dragging is only supported when using a QAbstractItemModel, ListModel or list."},
++                {tag: "DelegateModel with list", model: delegateModel, modelModel: list, warning: ""},
++                {tag: "DelegateModel with ListModel", model: delegateModel, modelModel: objectModel, warning: ""},
++                {tag: "ObjectModel", model: objectModel2, warning: ""},
++            ];
++        }
++        function test_warn_model(data) {
++            function dummyFunc() {}
++            if (data.warning !== "") {
++                ignoreWarning(warningFormat(116, 9, "QML ListView: " + data.warning));
++            }
++            listView.model = data.model;
++            if (typeof data.modelModel !== "undefined") {
++                listView.model.model = data.modelModel;
++            }
++            waitForRendering(listView, 500);
++            listView.ViewItems.dragUpdated.connect(dummyFunc);
++            toggleDragMode(listView, true);
++            toggleDragMode(listView, false);
++            listView.ViewItems.dragUpdated.disconnect(dummyFunc);
++        }
+     }
+ }

Ubuntu UI Toolkit

Merge lp:~zsombi/ubuntu-ui-toolkit/82-dragging-mode into lp:ubuntu-ui-toolkit/staging

Commit message

Description of the change

Preview Diff

Subscribers