用于移动的html5拖放[重复]
Posted
技术标签:
【中文标题】用于移动的html5拖放[重复]【英文标题】：html5 drag and drop FOR MOBILE [duplicate] 【发布时间】：2014-01-22 13:06:19 【问题描述】：我在 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)" >
</body>
</html>
【问题讨论】：
这是一个不同的问题，它有更好的答案，因为它解释了为什么拖放在移动设备上不起作用。 你能正确缩进你的代码吗？主题是相关的，但我不能 +1 【参考方案1】：大多数移动设备不会监听绑定到 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 >
<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 打孔器：
在您的页面上包含 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>
【讨论】：
确保您的脚本标签位于文档的末尾，以便在创建 DOM 后绑定事件。也不要忘记为每个触摸事件创建实际的回调。这样做的缺点是您必须手动处理 drop 事件。如果我是你，我会尝试我在答案末尾发布的 JQuery Touch Punch Library。 我已经在 android 设备上测试了您与 Firefox 和 Chrome 的链接，但它不起作用 @AlecMoore 您的答案不起作用。适用于移动设备和所有 @crock 这个答案是 3 年前选择的，可能已经过时了。此外，如果您正在寻求帮助，“不工作”并不是很有帮助的回答。描述您尝试过的内容、预期结果并将其与您观察到的实际结果进行比较。 我发现这个库很有帮助，它只使用你现有的 drop、dragenter 事件并在触摸设备上启用拖放 github.com/Bernardo-Castilho/dragdroptouch以上是关于用于移动的html5拖放[重复]的主要内容，如果未能解决你的问题，请参考以下文章
HTML5拖放-当Angular移动或删除源元素时不会触发“dragend”