1
一個「DIV」元素的阻力，這是我的代碼，因爲某些原因，我不能使用任何JavaScript LIB，等等; jQuery的：如何使iphone
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body style="height: 100%;margin:0;">
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;
border:1px solid #DDDDDD;
color:#333333;
background:#F2F2F2;
cursor:move;
}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;
border:1px solid #E78F08;
color:#FFFFFF;
font-weight:bold;
background:#F6A828;
overflow:hidden;
}
#droppable.highlight{
}
#draggable.end{
left:0px !important;
top:0px !important;
}
</style>
<div class="demo" style="margin:0 auto;height: 100%;">
<div id="A" style="float:left;height:50%;margin:0 100px 0 0;width:100%;background:#333;">
<div id="draggable">
<p>Drag me to my target</p>
</div>
</div>
<div id="droppable" >
<p>Drop here</p>
</div>
</div><!-- End demo -->
<script type="text/javascript">
var $=function(id) {
return document.getElementById(id);
}
$('draggable').ontouchstart = function(evt){
console.log(evt.pageX + "/" + evt.pageY);
}
$('draggable').ontouchmove = function(e){
if(e.touches.length == 1){ // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
var node = touch.target; // Find the node the drag started from
node.style.position = "absolute";
node.style.left = touch.pageX -node.offsetWidth /2+ "px";
node.style.top = touch.pageX -node.offsetHeight/2+ "px";
}
}
</script>
</body>
</html>
我的代碼無法生成正確的跟蹤，
所以我能做些什麼。
感謝