后天以来下  拖拽效果,纯手工业。下边会有代码和注释。

率先,要想能拖动div就思量到四个事件,鼠标按下  鼠标拖动   鼠标放手。

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
/*给div来些样式 最要紧的是纯属定位*/
#dIv{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id=”dIv”></div>
<script>
//获取大家的div
var dIv = document.getElementById(“dIv”);
//鼠标按下 获取event事件
dIv.onmousedown=function(e){
var e = event || window.event;
//dis 指的是鼠标的当前职分 减去 div距离荧屏左边的距离
约等于鼠标的地点距离到div左外边框的岗位
var dis = e.clientX – dIv.offsetLeft;
//dir 指的是鼠标的日前岗位 减去div距离显示屏上方的离开
也正是鼠标的职务距离到div上海外国语大学地框的职分
var dir = e.clientY – dIv.offsetTop;
//鼠标移动事件
document.onmousemove=function(e){
var e = event || window.event;
//l 正是div要左右移动的相距 拖动时鼠标的地方减去 dis
var l = e.clientX-dis;
//x 正是div要上下活动的相距 拖动时鼠标的职位减去 dir
var x = e.clientY-dir;
dIv.style.left=l+”px”;
dIv.style.top=x+”px”;
//鼠标松开事件 鼠标松手时
document.onmouseup=function(){
//把鼠标按下事件 和活动事件 清除 为零
永利开户送38元体验金,document.onmousedown=null;
document.onmousemove=null;
}
}
}
</script>
</body>
</html>

相关文章