locked
implementing drag/drop for windows 8 touch devices using html/js

    Question

  • I am trying to implement drag/drop on windows 8 app using html and javascript. I have a div rectangle box which I want to drag to another rectangle box and drop it there.

    It's my first time developing windows 8 app. Is there any sample code you can point me to ? or some tips on how to do it.

    Friday, June 28, 2013 3:21 PM

All replies

  • I can't find any samples yet but hopefully this will help you as a guideline:

    Guidelines for cross-slide (Windows Store apps)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh465299.aspx

    User interaction: Touch input... and beyond
    http://msdn.microsoft.com/en-us/library/windows/apps/dn263203.aspx

    Hope this helps.

    Cristhian


    Cristhian Uribe

    Saturday, June 29, 2013 1:06 AM
  • Hi,

    There is a native HTML5 drag & drop support you can use.

    First, define which elements are draggable, to those, assign a draggable="true" atribute, for example:

    <div class="draggableDivs" style=";top:0px;left:0px;z-index:1;width:100px;height:100px;background-color:red;" draggable="true"></div>

    This by itself will let you drag the div but won't have any drop logic.

    Then, we define where can we drop it, if its a given container or the whole document, in the App I made, was the whole document page, and we use this code (I used it inside a Page Control on a Navigator templated App):

    ready: function (element, options) {
    var that = this;
    var cols = element.querySelectorAll(".draggableDivs");
    /*select all the draggable elements, I used a class, you can use whatever logic you want */
    [].forEach.call(cols, function (col) {
    /* add the dragstart handler */
    col.addEventListener("dragstart", that.handleDragStart, false);
     
    });
     
    var cancel = function (event) {
    if (event.preventDefault) {
    event.preventDefault();
    }
    return false;
    }
    /* mypage is the PageControl and I make the whole section area available to drop the dragged div, you can change this selector to the container you want */
    element.querySelector(".mypage section").addEventListener("dragover", cancel, false);
     
    element.querySelector(".mypage section").addEventListener("dragenter", cancel, false);
     
    element.querySelector(".mypage section").addEventListener("drop", that.handleDrop, false);
    },


    handleDragStart and handleDrop are functions that, well, handle the first and last events of the dragging, in my case, I will move the dragged DIV to the drop position:

    dragSrcEl:null,
    handleDragStart:function(e) {
    this.style.opacity = "0.4";
    self.dragSrcEl = this;
    },
    handleDrop: function (e) {
    // this / e.target is current target element.
    if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
    }
    self.dragSrcEl.style.opacity = "1";
    // See the section on the DataTransfer object.
    self.dragSrcEl.style.top = e.clientY+"px";
    self.dragSrcEl.style.left = e.clientX+"px";
    return false;
    }

    You can put any logic inside these functions, it all depends on what you want to achieve. But all this can be done through native HTML 5, no need for WinJS objects.

    Hope it helps!

    Tuesday, July 2, 2013 2:59 PM