js原生拖拽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js原生拖拽相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script type="text/javascript">
//Cookie 没有做ie兼容
function setCookie(name,value,iDay){ //写入Cookie
var oDate = new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+‘=‘+value+‘;expires=‘+oDate;
};
function getCookie(name){ //读取Cookie
var arr=document.cookie.split(‘; ‘);
var i = 0;
for (i=0;i<arr.length;i++){
var arr2=arr[i].split(‘=‘);
if(arr2[0]==name){
return arr2[1];
}
}
return ‘‘;
};
function romoveCookie(name){ //移动Cookie
setCookie(name,‘1‘,-1);
};
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
var disX = 0; //用于记住鼠标按下时 左侧 鼠标和浏览器边框的距离 减去 div距离浏览器边框的距离
var disY = 0; //用于记住鼠标按下时 顶部 鼠标和浏览器边框的距离 减去 div距离浏览器边框的距离
var x = getCookie(‘x‘);
var y = getCookie(‘y‘);
if(x){
oDiv.style.left=x+‘px‘;
oDiv.style.top=y+‘px‘ ;
}
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //div内部鼠标距离div边框的左侧距离
disY=oEvent.clientY-oDiv.offsetTop //div内部鼠标距离div边框的顶部距离
document.onmousemove= function(ev){
var oEvent = ev||event; //时间对象
var l = oEvent.clientX-disX; //鼠标移动事件 移动时用鼠标距离浏览器的边框距离减去div内鼠标的距离
var t = oEvent.clientY-disY;
if (l<0){ //不能div脱离游览器当小于0是直接复制为0
l=0;
} else if (l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
} //如何移动的距离 大于 浏览器宽度减去div本身的宽度 则把 浏览器宽度减去div本身的宽度赋值给鼠标移动的距离
if (t<0){ //同理 就是顶部距离
t=0;
} else if (t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+‘px‘;
oDiv.style.top=t+‘px‘;
};
document.onmouseup = function(){
document.onmousemove=null; //弹起时把移动事件清空
document.onmouseup=null; //弹起时把按下事件清空
setCookie(‘x‘,oDiv.offsetLeft,5); //利用Cookie记住位置当浏览器再次打开就能记录位置
setCookie(‘y‘,oDiv.offsetTop,5);
};
return false; //把默认的鼠标按下时间屏蔽掉
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
以上是关于js原生拖拽的主要内容，如果未能解决你的问题，请参考以下文章