<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖动小块效果</title>
</head>
<style type="text/css">
.lineDiv{ position: absolute; height: 5px; font-size: 0; line-height: 0; 30px; top: 0px; left: 0%; margin-left:0px;}
.lineDiv .minDiv{ position: absolute; top:-5px; left: 0; 30px; height: 30px; background: #000; cursor: pointer;}
</style>
<body>
<div id="lineDiv" class="lineDiv">
<div id="minDiv" class="minDiv"></div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
function g(id){ return document.getElementById(id)}
var lineDiv=g("lineDiv");
var minDiv=g("minDiv");
var ifBool=false; //是否安下
minDiv.onmousedown=function(e){
e.stopPropagation();
ifBool=true;
}
window.onmousemove=function(e){
e.stopPropagation();
if(ifBool==true){
var bodyW=document.body.clientWidth||document.documentElement.clientWidth;
var bodyH=document.body.clientHeight||document.documentElement.clientHeight;
var x= e.clientX;
var y= e.clientY;
var lineDiv_left=getPosition(lineDiv).left;
var lineDiv_top=getPosition(lineDiv).top;
var minDiv_left=(x-lineDiv_left);
var minDiv_top=(y-lineDiv_top);
if(x<0){
minDiv_left=0
}
if(minDiv_left>bodyW-30){
minDiv_left=bodyW-15;
}
if(y<0){
minDiv_top=0
}
if(minDiv_top>bodyH-30){
minDiv_top=bodyH-30;
}
// document.title=lineDiv_left"+,+"
minDiv.style.left=minDiv_left+"px";
minDiv.style.top=minDiv_top+"px";
}
}
window.onmouseup=function(){
ifBool=false;
}
function getPosition(node){
var left=node.offsetLeft;
var top=node.offsetTop;
current=node.offsetParent;
while(current!==null){
left+=current.offsetLeft;
top+=current.offsetTop;
current=current.offsetParent;
}
return{"left":left,"top":top}
}
}
</script>
$("html").bind("touchmove",function(e){
$("body",this).html(e.originalEvent.changedTouches[0].pageX)
})