問題描述
我在 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="img_logo.gif" 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="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 等是從事件觸發的回調，您可以在其中處理觸摸事件.
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="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的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！