js 原生拖拽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 原生拖拽相关的知识，希望对你有一定的参考价值。
拖拽效果很是普遍 今天拿原生简单写一下
（可以按拖拽轨迹 返回到原点）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
color:#666;
}
div{
height: 150px;
width: 300px;
border: 1px solid #ccc;
position: absolute;
left: 150px;
top: 150px;
}
h5{
line-height: 35px;
text-align: right;
padding-right: 12px;
border-bottom: 1px solid #ccc;
cursor: move;
}
h5 span{
cursor: pointer;
}
li{
list-style: none;
line-height: 25px;
padding-left: 12px;
}
</style>
<body>
<div id="box">
<h5 id="nav"><span id="back">点击我原路返回</span></h5>
<ul>
<li>Drag: <span>false</span></li>
<li>Top: <span>150</span></li>
<li>Left: <span>150</span></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var box=document.getElementById("box"),
nav=document.getElementById("nav"),
back=document.getElementById("back"),
spans=document.getElementsByTagName("span"),
rouse=[{x:box.offsetLeft,y:box.offsetTop}],
Drag=false;
nav.onmousedown=function(){
Drag=true;
}
document.onmousemove=function(e){
var e=e || window.e;
if(!Drag) return false;
box.style.left=e.clientX-30+"px";
box.style.top=e.clientY-17+"px";
rouse.push({x:box.offsetLeft, y:box.offsetTop});
offset();
}
document.onmouseup=function(){
Drag=false;
offset();
}
back.onclick=function(){
console.log(rouse);
if(rouse.length==1) return false;
var timer=setInterval(function(){
var oPos =rouse.pop();
oPos ? (box.style.left =oPos.x + "px", box.style.top = oPos.y + "px", offset()) : clearInterval(timer)
console.log(oPos);
},30)
}
function offset(){
spans[1].innerHTML=Drag;
spans[2].innerHTML=box.offsetLeft;
spans[3].innerHTML=box.offsetTop;
}
box.ontouch
</script>
还望各位多多指点！！！
以上是关于js 原生拖拽的主要内容，如果未能解决你的问题，请参考以下文章