Drag and drop between two ListView


  • Hi

    I want to ask how can I drag a item from one ListView to another. I can't find way to enable one list view as drag source and other as drop source.

    Simeon Antonov

    Monday, May 07, 2012 10:18 AM


All replies

  • Sorry, Drag and Drop is currently not supported.


    Jeff Sanders (MSFT)

    Monday, May 07, 2012 12:41 PM
  • Is that a beta thing or you will never support drag and drop?

    I have a listview with groups and want to drag items from one group into another group


    Thursday, May 10, 2012 10:24 PM
  • Sorry, it still is not supported.  We will not discuss future feature changes that may or may not be in the next release (sorry).

    Jeff Sanders (MSFT)

    Friday, May 11, 2012 8:27 PM
  • Simeon,
    You can implement drag and drop yourself by handling MSPointer events, but unfortunately it's a fair amount of work. I hope to blog about it in the near future. For now, the gist:

    • Handle MSPointerDown in your container to detect a drag starting.
    • Use msElementsFromPoint to find the item being dragged.
    • Use msSetPointerCapture to associate all remaining pointer events with the item
    • Hook up MSPointerMove, Up, and Cancel handlers to the item
    • Remove the item from flow and position it with transform: translate
    • On MSPointerMove you can move the item and detect the current target
    • On MSPointerUp (or Cancel) you can stop the drag and re-insert the item in the appropriate place

    That's basically it.



    Wednesday, May 16, 2012 9:33 PM
  • Hi Scott,Thanks for answer.

    I implement it with HTML5 drag and drop events.


    Simeon Antonov

    Wednesday, May 16, 2012 9:49 PM
  • Scott,

    maybe I miss something but I just want to drag/drop elements within a single ListView.

    However, I tried it the way you proposed but for some reason only the MSPointerDown event gets fired.

    I tried it in any combination with win-interactive, msTouchAction and msSetPointerCapture but nothing helped.

    Below is the code which basically resorts a ListView. It works fine with the mouse but not with touch.

    Any ideas? I'd appreciate any input.




            function addSorter(listView, callback) {

                listView.element.addEventListener("MSPointerDown", startDrag, false);
                listView.element.addEventListener("MSPointerMove", moveDrag, false);
                listView.element.addEventListener("MSPointerUp", stopDrag, false);
                listView.element.addEventListener("MSPointerCancel", cancelDrag, false);
                //listView.element.style.msTouchAction = "none";

                var pointer = null;

                function startDrag(evt) {
                    var src = getItem(evt);
                    if (!src) // || itemSelectionIndex != listView.indexOfElement(src))


                    pointer = {
                        source: src,
                        target: null,
                        id: evt.pointerId,
                        selectionChanged: false

                function getItem(evt) {
                    var idx;
                    for (var o = evt.target; o != null; o = o.parentNode) {
                        idx = listView.indexOfElement(o);
                        if (idx != -1)
                            return listView.elementFromIndex(idx); // not o because it might find sub elements
                    return null;

                function moveDrag(evt) {
                    if (!pointer || pointer.id != evt.pointerId)


                    var tgt = getItem(evt);
                    if (!tgt || tgt == pointer.source) {
                        if (pointer.target) {
                            pointer.target.style.backgroundColor = "";
                            pointer.target = null;
                    if (!pointer.selectionChanged) {//itemSelectionIndex != listView.indexOfElement(pointer.source)) // we need to select the source because we immediatly started DnD
                        pointer.selectionChanged = true;
                    // var tgt = listView.elementFromIndex(idx);
                    if (pointer.target && tgt != pointer.target)
                        pointer.target.style.backgroundColor = "";
                    tgt.style.backgroundColor = "red";
                    pointer.target = tgt;

                function stopDrag(evt) {
                    if (!pointer || pointer.id != evt.pointerId)


                    var src = -1;
                    var tgt = -1;
                    if (pointer.target) {
                        src = listView.indexOfElement(pointer.source);
                        tgt = listView.indexOfElement(pointer.target);
                    if (tgt != -1)
                        callback(src, tgt);

                function cancelDrag(evt) {
                    if (pointer && pointer.target)
                        pointer.target.style.backgroundColor = "";
                    pointer = null;

                function preventDefaultManipulationAndMouseEvent(evtObj) {
                    if (evtObj.preventDefault)

                    if (evtObj.preventManipulation)

                    if (evtObj.preventMouseEvent)


    • Edited by hish el Saturday, July 28, 2012 11:49 AM
    Saturday, July 28, 2012 11:44 AM
  • Hi

    drag and drop with reorder in the same listview still not supported yet?? 

    Tuesday, July 31, 2012 10:27 AM
  • Sorry, it still is not supported.

    Jeff Sanders (MSFT)

    Tuesday, July 31, 2012 12:14 PM
  • Sorry, it still is not supported.

    Jeff Sanders (MSFT)

    Is there any plan to support Drag Drop in List view in future?

    Are there any alternative approaches available to support it?

    Thursday, September 27, 2012 9:35 AM
  • Hi Santosh,

    We do not discuss features before they are publically announced (even if I DID know I could not tell you).


    Jeff Sanders (MSFT)

    Thursday, September 27, 2012 2:56 PM