html5 拖放 FOR MOBILE-前端问题

html5 drag and drop FOR MOBILE(html5 拖放 FOR MOBILE)

本文介绍了html5 拖放 FOR MOBILE的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 w3schools 上找到了这个用于拖放的代码，它适用于桌面，但不适用于移动设备.

I found this code on w3schools for drag and drop, which works on a desktop, but not mobile devices.

我需要修改什么才能识别触摸?

What do I need to modify so that it recognizes touch?

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="aW1nX2xvZ28uZ2lm" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

推荐答案

大多数移动设备不监听绑定到 DOM 的拖动事件.我会推荐使用 touchmove 事件和随之而来的事件.它看起来像:

Most mobile devices do not listen to the drag events that are bound to the DOM. I would recommend using the touchmove event and the events that go along with with it. It would look something like:

选项 1

 <!DOCTYPE HTML>
 <html>
 <head>
 <style type="text/css">
       #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
 </style>
 </head>
 <body>

 <p>Drag the W3Schools image into the rectangle:</p>

 <div id="div1"></div>
 <br>
 <img id="drag1" src="aW1nX2xvZ28uZ2lmIHdpZHRoPQ=="336" height="69">

 <script type="text/javascript">
  var el = document.getElementById('drag'); 

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

  function handleStart(event) {
      // Handle the start of the touch
  }

  // ^ Do the same for the rest of the events

</script>
</body>
</html>

handleStart、handleEnd 等是从事件触发的回调，您可以在其中处理触摸事件.

The handleStart, handleEnd, etc. are your callbacks that are fired from the event, which is where you can handle touch event.

如果您不想完成触摸事件方面的所有繁重工作，那么我建议您使用 JQuery Touch Punch 之类的库.我用过它，它在 iOS 上运行良好.

If you don't want to do all of the heavy lifting as far as the touch events, then I would recommend a library such as JQuery Touch Punch. I've used it and it works very well on iOS.

这里是库的链接，您还可以在自己的移动设备上测试它的性能:http://touchpunch.furf.com/

Here's a link to the library where you can also test out its performance in your own mobile device: http://touchpunch.furf.com/

选项 2(更好的选项)像这样包含 JQuery Touch 打孔器:

OPTION 2 (BETTER OPTION) JQuery Touch punch is included like so:

在您的页面上包含 jQuery 和 jQuery UI.

Include jQuery and jQuery UI on your page.

<script src="aHR0cDovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMS43LjIubWluLmpz"></script>
<script src="aHR0cDovL2NvZGUuanF1ZXJ5LmNvbS91aS8xLjguMjEvanF1ZXJ5LXVpLm1pbi5qcw=="></script>

// Download this from the link above
<script src="anF1ZXJ5LnVpLnRvdWNoLXB1bmNoLm1pbi5qcw=="></script>

<script>
    $('#drag1').draggable();
    $( "#div1" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "isDropped" )
            .html( "Dropped!" );
        }
      });
    });

</script>

这篇关于html5 拖放 FOR MOBILE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！