locked
HTML Drag Drop only works with mouse input - doesn't work with touch input .

    Question

  • HTML Drag Drop only works with mouse input - doesn't work with touch input .

    The win8 consumer preview did not have this problem.

    Do we need to enable touch handling for HTML Drag-Drop, explicitly in Win8 Release Preview ?

    I set draggable on a div, and i cant drag-drop it with touch, only mouse works (did not see this problem in win8 consumer preview)

    Tuesday, June 5, 2012 3:15 AM

Answers

  • Hi Joe,

    Touch based DnD was removed for the RP.  I am trying to find out why and where this is documented.  I will update this post when I get an answer!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 6, 2012 2:47 PM
    Moderator
  • Hi Juan,

    No there is no news.  We do not discuss future releases in the forums, sorry.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, July 23, 2012 11:50 AM
    Moderator

All replies

  • HI

    I just repro your issue.

    Thanks for your valuable feedback. You may also submit it to the following site in the formal way:

    http://connect.microsoft.com/VisualStudio/

    Here is the repro codes. You can attach it for make dev team quickly trouble shooting.

    Blank js app default.html:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSApplication3</title>
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
        <!-- JSApplication3 references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
        <style type="text/css">
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    </head>
    <body>
        <div id="div1"></div>
    <img id="drag1" src="\images\logo.png" draggable="true"
     width="336" height="69" />
        <p>Content goes here</p>
    </body>
    </html>
    default.js:
    (function () {
        "use strict";
        function  allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
               ev.dataTransfer.setData("Text", ev.target.id);
           }
       function drop(ev) {
               var data = ev.dataTransfer.getData("Text");
               ev.target.appendChild(document.getElementById(data));
               ev.preventDefault();
           }
        var app = WinJS.Application;
        app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                   
                    div1.addEventListener("drop", drop);
                    div1.addEventListener("dragover", allowDrop);
                    drag1.addEventListener("dragstart", drag);
                } else {
                    
                }
                WinJS.UI.processAll();
            }
        };
        app.oncheckpoint = function (eventObject) {
           
        };
        app.start();
    })();

    Thanks

    Dino

    Wednesday, June 6, 2012 8:54 AM
  • Hi Joe,

    Touch based DnD was removed for the RP.  I am trying to find out why and where this is documented.  I will update this post when I get an answer!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 6, 2012 2:47 PM
    Moderator
  • Thanks Dino/Jeff,

    This feature is blocking taking advantage of Drag-and-Drop inside Metro Apps with touch. I added a bug as suggested by Dino, with his example code snippet:

    https://connect.microsoft.com/VisualStudio/feedback/details/746984/html-drag-drop-only-works-with-mouse-input-doesnt-work-with-touch-input

    Wednesday, June 6, 2012 3:18 PM
  • Any news on this issue? Will it be solved for RTM?

    Thank you,

    Juanma


    Juan Manuel Servera
    twitter: @jmservera
    mi blog: http://jmservera.wordpress.com
    Únete al grupo de WP7 en LinkedIn
    MCPD WP7 Developer - MCTS Sharepoint 2010 Application Development

    Saturday, July 21, 2012 9:54 AM
  • Hi Juan,

    No there is no news.  We do not discuss future releases in the forums, sorry.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, July 23, 2012 11:50 AM
    Moderator
  • I'm facing this same problem. HTML5 allows you to use a very usefull resource (drag and drop), but It does not work in touch devices. I'ts a pitty. I will have to implement all the logic that was supposed to be included on browser as a native HTML logic to make it work.
    Wednesday, August 22, 2012 7:30 PM
  • Hi,

    Any updates about drag drop in touch devices???

    -Abhijeet

    Monday, November 5, 2012 5:12 AM
  • Any updates?  DnD works with mouse but not touch.  I am using jquery ui for DnD

    www.emadibrahim.com

    Friday, November 16, 2012 11:48 PM