1.鼠标按下选中图片
2.鼠标移动,图片跟着移动
3.鼠标松开,图片定住
这里以简单的两个div示例说明:
<div id="box1"></div>
<div id="box2"></div>
大家要记住,拖拽移动问题是根据鼠标坐标来实现,那么就要给其开启定位
#box1{
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
fun(box1);
fun(box2);
//构建一个函数
function fun(obj){
//鼠标被按下事件
obj.onmousedown = function(event){
/*
设置box1捕获所有鼠标按下事件,在IE8中使用
setCapture()
只有IE8支持,但在火狐中不报错,谷歌中报错
releaseCapture()
取消捕获事件
*/
//兼容问题
// if(obj.setCapture){
// obj.setCapture();
// }
//如果有前者,则执行后者 与上述if效果一样
obj.setCapture && obj.setCapture();
event = event||window.event;
//鼠标水平偏移量 - 元素水平偏移量
var wl = event.clientX - obj.offsetLeft;
var wt = event.clientY - obj.offsetTop;
//鼠标移动事件
document.onmousemove = function(event){
//兼容
event = event||window.event;
var left = event.clientX - wl;
var top = event.clientY - wt;
obj.style.left = left +"px";
obj.style.top = top +"px";
}
//鼠标松开事件
document.onmouseup = function(){
//取消鼠标移动事件
document.onmousemove = null;
obj.releaseCapture && obj.releaseCapture();
}
/*
当我们拖拽网页中的内容时,浏览器会默认去收索引擎中搜索内容
此时会导致拖拽功能异常,如果不希望发送这种行为
可以通过return false来取消,但对IE8不起作用
*/
return false;
}
}
}
</script>
刚写成运行的时候,会发现当鼠标指针移动时,总是会对着box左上角,而不是鼠标在box中点击哪就对应着哪来移动。
下边代码可以解决
//鼠标水平偏移量 - 元素水平偏移量
var wl = event.clientX - obj.offsetLeft;
var wt = event.clientY - obj.offsetTop;
var left = event.clientX - wl;
var top = event.clientY - wt;
以上代码中还包含了浏览器兼容问题。大家可以自行浏览一下。
写的不好,大家多包含!