移动设备上的HTML5拖放

Question

移动设备上的HTML5拖放

14

我在w3schools上找到了这段拖放的代码，它在桌面上可以工作，但是在移动设备上无法使用。

我需要做什么修改才能让它识别触摸输入？

<!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>

- SnowboardBruin

2

这是一个不同的问题，它有一个更好的答案，因为它解释了为什么移动设备上无法使用拖放功能。 - dfmiller

你能正确缩进你的代码吗？这个主题很相关，但我不能点赞。 - João Pimentel Ferreira

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alec Moore · Accepted Answer

大多数移动设备不会监听绑定到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>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>

handleStart，handleEnd等函数是事件触发时调用的回调函数，您可以在这里处理触摸事件。

如果您不想自己处理所有触摸事件，则建议使用像JQuery Touch Punch这样的库。我已经使用过它，在iOS上运行得非常好。

以下是该库的链接，您可以在自己的移动设备上测试其性能：http://touchpunch.furf.com/

选项2（更好的选项） JQuery Touch punch的包含方式如下：

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

<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>