实现图片的拖拽功能就好像电脑桌面的软件图标可以跟随鼠标改变位置一样
在这里我用一个div块来代表图片
首先讲一下实现的原理
- 首先确定div块被鼠标点击，即是鼠标按下 使用onmousedown()函数
- 其次当鼠标被按下之后要开始进行移动 使用onmousemove（）函数
- 然后在被移动之后要松开鼠标，然后div块被固定 使用onmouseup()函数
- 然后了解了这个大致的逻辑就可以上手进行写js了
简单的html页面这里就不在说了直接说js的编写
首先获取div块，然后为它绑定一个鼠标按下事件
window.onload = function(){
//获取div块，这里我设置的div的id为box01
var box01 = document.getElementById("box01");
box01.onmousemove = funtion(){
};
};
然后接着进行第二步设置div块的移动事件，这个事件应当在鼠标被按下之后然后才发生的因此应该在上个事件里面
document.onmousemove = function(event){
//浏览器IE8以及以下浏览器的兼容
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
//div块进行移动
box01.style.left = left+"px";
box01.style.top = top+"px";
};
其中传入IE8的浏览器兼容性问题可以在上一篇博客看到，这里不在说了
然后进行下一步，绑定鼠标被松开的事件
/*当鼠标被松开时候，div固定位置*/
document.onmouseup = function(){
/*此时不让div块继续移动，即要解除onmousemove函数*/
document.onmousemove = null;
/*同时需要解除松开函数*
*当div固定位置之后，已经完成了，但此时document.onmouseup函数依旧存在
* 所以我们需要解除这个函数
*/
document.onmouseup = null;
};
这里只需要解除div移动的事件就行，使div块可以固定位置，同时松开事件执行完之后，这个过程已经完成了但是该事件依旧在进行，毫无意义，因此避免更很多问题可以直接解除这个事件
这样一个简单的div块被拖拽的效果就可以实现了，只需要自己添加上图片就可以实现图片被拖拽的效果，下面附上完整代码-仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01 {
width: 100px;
height: 100px;
/*绝对定位*/
position: absolute;
background-color: red;
}
</style>
<script type="text/javascript">
/*实现div的拖拽功能*/
/*
* 实现拖拽功能的思路
* 首先需要鼠标按下之后 onmousedown()
* div会跟随鼠标进行移动 onmousemove()
* 在鼠标松开之后，div会立刻固定位置 onmouseup()
*/
window.onload = function() {
//获取box01
var box01 = document.getElementById("box01");
//为box01绑定一个鼠标被按下事件
box01.onmousedown = function() {
/*在鼠标被按下之后，div块跟随鼠标进行移动*
*此时需要传入一个参数来获得div的坐标位置进行移动
*/
document.onmousemove = function(event) {
//浏览器IE8以及以下浏览器的兼容
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
//div块进行移动
box01.style.left = left + "px";
box01.style.top = top + "px";
};
/*当鼠标被松开时候，div固定位置*/
document.onmouseup = function() {
/*此时不让div块继续移动，即要解除onmousemove函数*/
document.onmousemove = null;
/*同时需要解除松开函数*
*当div固定位置之后，已经完成了，但此时document.onmouseup函数依旧存在
* 所以我们需要解除这个函数
*/
document.onmouseup = null;
};
}
};
</script>
</head>
<body>
<div id="box01"></div>
</body>
</html>
