none
Drag and drop between two ListView

    Question

  • 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

Answers

All replies

  • Sorry, Drag and Drop is currently not supported.

    -Jeff


    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


    www.emadibrahim.com

    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.

    HTH,
    -Scott


    -Scott

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

    I implement it with HTML5 drag and drop events.

    Simeon


    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.

    Thanks

    Hish

    --------------------------------

            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.classList.add("win-interactive");
                //listView.element.style.msTouchAction = "none";

                var pointer = null;

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

                    preventDefaultManipulationAndMouseEvent(evt);
                    //listView.element.msSetPointerCapture(evt.pointerId);

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

                    preventDefaultManipulationAndMouseEvent(evt);

                    var tgt = getItem(evt);
                    if (!tgt || tgt == pointer.source) {
                        if (pointer.target) {
                            pointer.target.style.backgroundColor = "";
                            pointer.target = null;
                        }
                        return;
                    }
                    if (!pointer.selectionChanged) {//itemSelectionIndex != listView.indexOfElement(pointer.source)) // we need to select the source because we immediatly started DnD
                        listView.selection.set(listView.indexOfElement(pointer.source));
                        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)
                        return;

                    preventDefaultManipulationAndMouseEvent(evt);

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

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

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

                    if (evtObj.preventManipulation)
                        evtObj.preventManipulation();

                    if (evtObj.preventMouseEvent)
                        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


    Jeff Sanders (MSFT)

    Thursday, September 27, 2012 2:56 PM