原生js拖拽指定div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js拖拽效果</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById('box');
oBox.onmousedown = function(e){
var oEvent =e || window.event,
disL = oEvent.clientX - oBox.offsetLeft,
disT = oEvent.clientY - oBox.offsetTop,
maxL = document.documentElement.clientWidth - oBox.offsetWidth,
maxT = document.documentElement.clientHeight - oBox.offsetHeight;
document.onmousemove = function(e){
var oEvent = e || window.event,
disX = oEvent.clientX - disL,
disY = oEvent.clientY - disT;
//console.log(disX);
if(disX <=0){ disX =0}
if(disY <=0){ disY =0}
if(disX >=maxL){ disX =maxL}
if(disY >=maxT){ disY =maxT}
oBox.style.left = disX+'px';
oBox.style.top = disY+'px';
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
</script>
<style type="text/css">
*{ margin:0; padding:0;}
#box{ position:absolute; left:0; top:0; width:100px; height:100px; background:#f60;}
</style>
</body>
</html> 本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-02-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
