原生js拖拽效果
Posted 静守己心,笑谈浮华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js拖拽效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:100px;
height:100px;
background: red;
position: absolute;
left:0;
top:0;
cursor: move;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script>
var oBox=document.getElementById(‘box‘);
oBox.onmousedown=function(e){
var e=e || event;
var disX=e.offsetX;
var disY=e.offsetY;
var iWidth=document.documentElement.clientWidth-this.offsetWidth;
var iHeight=document.documentElement.clientHeight-this.offsetHeight;
document.onmousemove=function(e){
var l=e.clientX-disX;
var t=e.clientY-disY;
l = l>iWidth?iWidth:(l<0?0:l);
t = t>iHeight?iHeight:(t<0?0:t);
oBox.style.left=l+"px";
oBox.style.top=t+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
</script>
以上是关于原生js拖拽效果的主要内容，如果未能解决你的问题，请参考以下文章