拖放触摸屏图像

时间:2014-11-04 10:26:30

标签: jquery html drag-and-drop

我发现这个教程是拖放的: http://www.w3schools.com/html/html5_draganddrop.asp

这正是我想要的,但它并不支持触摸屏。我该怎么办才能让它适用于触摸屏呢?

我想要做的就是拖动图像并将其放入另一个支持所有设备的图像中。

1 个答案:

答案 0 :(得分:1)

var draggable = document.getElementById('draggable');
 draggable.addEventListener('touchmove', function(event) {
   var touch = event.targetTouches[0];

   // Place element where the finger is
   draggable.style.left = touch.pageX-25 + 'px';
   draggable.style.top = touch.pageY-25 + 'px';
   event.preventDefault();
 }, false);

这是一个教程:http://mobiforge.com/design-development/touch-friendly-drag-and-drop

请告诉我它是否有效或者您是否需要更多帮助:)

编辑:这是a jsfiddle,其中包含我之前构建的测试。我已经用评论更新了它,所以你应该看看那里发生了什么。 也许一个JavaScript专业人员想要打我这个,但它是为我的目的工作,我似乎工作。 我没有在旧浏览器中测试它,因为它是一个个人项目,我不会在那里进行“优化IE浏览器”。