html5拖放FOR MOBILE

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

问题描述

我在w3schools上发现这个代码用于拖放，它在桌面上工作，但不在移动设备上。

需要修改才能识别触摸？

 <！DOCTYPE HTML> 
< html> 
< head> 
< style type =text / css> 
＃div1 {width：350px; height：70px; padding：10px; border：1px solid #aaaaaa;} 
< / style> 
< script> 
函数allowDrop（ev）
 {
 ev.preventDefault（）; 
} 
 
函数drag（ev）
 {
 ev.dataTransfer.setData（Text，ev.target.id）; 
} 
 
函数drop（ev）
 {
 ev.preventDefault（）; 
 var data = ev.dataTransfer.getData（Text）; 
 ev.target.appendChild（document.getElementById（data））; 
} 
< / script> 
< / head> 
< body> 
 
< p>将W3Schools图像拖动到矩形中：< / p> 
 
< div id =div1ondrop =drop（event）ondragover =allowDrop（event）>< / div> 
< br> 
< img id =drag1src =img_logo.gifdraggable =trueondragstart =drag（event）width =336height =69> 
 
< / body> 
< / html>

解决方案

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

选项1

 <！DOCTYPE HTML> 
< html> 
< head> 
< style type =text / css> 
＃div1 {width：350px; height：70px; padding：10px; border：1px solid #aaaaaa;} 
< / style> 
< / head> 
< body> 
 
< p>将W3Schools图像拖动到矩形中：< / p> 
 
< div id =div1>< / div> 
< br> 
< img id =drag1src =img_logo.gif width =336height =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）; 
 
函数handleStart（event）{
 //处理触发开始
} 
 
 //做同样的对于其余的事件
 
< / script> 
< / body> 
< / html> 
  pre> 
 
  handleStart，handleEnd等是您从事件触发的回调，您可以在其中处理触摸事件。
 
 
 如果你不想在触摸事件中做所有的重物，那么我会推荐一个图书馆，如JQuery Touch Punch。我已经使用它，它在iOS上的工作非常好。
 
 
 这是一个链接到库，您还可以在自己的移动设备中测试其性能： 
 
 
  选项2（更好的选项） 
 JQuery Touch punch包含如下：
 
 
 在您的页面上包含jQuery和jQuery UI。 / p> 
 
 
 < script src =http://code.jquery.com/jquery-1.7.2.min.js> ;< /脚本> 
< script src =http://code.jquery.com/ui/1.8.21/jquery-ui.min.js>< / script> 
 
 //从以上链接下载
< script src =jquery.ui.touch-punch.min.js>< / script> 
 
< script> 
 $（'＃drag1'）。draggable（）; 
 $（＃div1）.droppable（{
 drop：function（event，ui）{
 $（this）
 .addClass（isDropped）
 .html（Dropped！）; 
} 
}）; 
}）; 
 
< / script> 
  
 
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="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>
 解决方案 
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:
OPTION 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="img_logo.gif width="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>
The handleStart, handleEnd, etc. are your callbacks that are fired from the event, which is where you can handle touch event.
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.
Here's a link to the library where you can also test out its performance in your own mobile device: http://touchpunch.furf.com/
OPTION 2 (BETTER OPTION)JQuery Touch punch is included like so:
Include jQuery and jQuery UI on your page.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

// Download this from the link above
<script src="jquery.ui.touch-punch.min.js"></script>

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

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