JavaScript图片或者div拖动拖动函数的实现

/*

* 拖动图片封装

html格式：<img lay-src="${item.Resourcesurl}" alt="${item.ResourcesName}" style="position: absolute;" onmousemove="drag(this)" >

*/

function drag(obj) {

/*实现div的拖拽功能

* 实现拖拽功能的思路

* 首先需要鼠标按下之后 onmousedown()

* div会跟随鼠标进行移动 onmousemove()

* 在鼠标松开之后，div会立刻固定位置 onmouseup()

*/

//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown

obj.onmousedown = function (event) {

//设置捕获所有鼠标按下的事件

/*

* setCapture()

* - 只有IE支持，但是在火狐中调用时不会报错，

* 而如果使用chrome调用，会报错

*/

/*if(box1.setCapture){

box1.setCapture();

}*/

obj.setCapture && obj.setCapture();

event = event || window.event;

//div的偏移量 鼠标.clentX - 元素.offsetLeft

//div的偏移量 鼠标.clentY - 元素.offsetTop

var ol = event.clientX - obj.offsetLeft;

var ot = event.clientY - obj.offsetTop;

//为document绑定一个onmousemove事件

document.onmousemove = function (event) {

event = event || window.event;

//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove

//获取鼠标的坐标

var left = event.clientX - ol;

var top = event.clientY - ot;

// console.log(left, top);

//修改box1的位置

obj.style.left = left + "px";

obj.style.top = top + "px";

};

//为document绑定一个鼠标松开事件

document.onmouseup = function () {

//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

//取消document的onmousemove事件

document.onmousemove = null;

//取消document的onmouseup事件

document.onmouseup = null;

//当鼠标松开时，取消对事件的捕获

obj.releaseCapture && obj.releaseCapture();

};

/*

* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，

* 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，

* 如果不希望发生这个行为，则可以通过return false来取消默认行为

*

* 但是对IE8不起作用

*/

return false;

};

}