是否Windows应用商店的应用或HTML5拖放支持触摸设备？

我是新来的HTML5和Windows应用商店的应用程序。我创建了一个项目，我希望我的图像可以拖动。首先为鼠标拖动它的工作很好，但后来我在触摸设备测试它不工作。这里是图像：是否Windows应用商店的应用或HTML5拖放支持触摸设备？

这一个是在非触摸设备测试，它的工作：

This one is work with mouse cursor

这一个是触摸屏设备上进行测试和它不工作：

Doesn't Work

这里是我的html：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="script.js"></script> 
     <title>Drag and Drop</title> 
    </head> 

<body> 

<div id="content"> 
    <div id="Store" style="border: solid 1px white;"></div> 

    <div id="right" style="border: solid 1px white;"> 
     <img id="img1" src="/image/bugimgS1.png" /> 
    </div> 

</div> 
    </body> 
</html>

这里是我的脚本：

(function() { 
    WinJS.UI.Pages.define('DragandDrop.html', 
     { 
      ready: function() 
      { 
       define(); 
      } 
     }); 
    function get(ID) { return document.getElementById(ID); } 
    function create(tag) { return document.createElement(tag); } 
    function define() 
    { 
     var r = get('Store'); 
     var img1 = get('img1'); 
     img1.addEventListener('dragstart', _dragStart, false); 
     r.addEventListener('dragenter', function (e) { e.preventDefault(); }); 
     r.addEventListener('dragover', function (e) { e.preventDefault(); }); 
     r.addEventListener('drop', _dropped, false); 


     function _dragStart(e) { 
      e.dataTransfer.setData('Text', e.target.id); 
     } 

     function _dropped(e) { 
      e.preventDefault(); 
      var data = e.dataTransfer.getData('Text'); 
      r.appendChild(document.getElementById(data)); 
     } 


    } 

})();

请我真的需要帮助，使这两个触摸和非触摸设备本工作方案。提前致谢。

来源

2013-01-08 Visal Chhourm

我不知道为什么你的代码不能正常工作。从理论上说，除非你专门鼠标和触摸区分，然后触摸事件应该由所有基本的鼠标事件进行响应（即的onclick）。当你使用触摸时，你的事件是否会触发？ –

感谢您的建议:)。我把调试器;在我的代码中，然后当我尝试触摸并拖动图像时，我注意到事件没有触发:)。也许我需要添加像你说的另一个事件（即onclick）来使我的项目工作:)。谢谢我观看了“使用HTML5 Jump Start开发Windows 8应用程序”课程，我从您和迈克尔先生那里获得了许多知识:)。对不起我的英语:) –

你需要使用一个MSGesture对象要能够支持拖放通过触摸事件下降。其它事件，诸如onclick工作无缝无论鼠标指针，触摸，或数字化笔的。拖动事件目前不会触摸。我已经在Chrome和IE中测试过了。

有一个伟大的演示在这里：http://ie.microsoft.com/testdrive/Browser/BrowserSurface/

来源

2013-01-09 21:54:16

你的意思是这个项目？ https://github.com/molant/MSGestures或http://msdn.microsoft.com/en-us/library/windows/apps/hh968035.aspx（您的链接已损坏） –

资源已删除 –

看起来像当我粘贴时，我错过了其中的一部分。我的答案用正确的链接更新了答案。我正在链接MSDN文章。我还没有看到GitHub项目，但它看起来很有趣。我会检查出来的！ –

是否Windows应用商店的应用或HTML5拖放支持触摸设备？

回答

相关问题