how to make a 'div' element drag on iphone .

this is my code,for some reason , i can't use any javascript lib ,like ;jquery:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
<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>

my code Can not generate the right track，

so what can i do .

thanks

ansaurus

tags:

views:

answers:

how to make a 'div' element drag on iphone .

related questions