java 鼠标拖拽_JavaScript DOM 鼠标拖拽

拖拽效果基于鼠标事件：mousedown、mousemove、mouseup

分别为鼠标按下、鼠标移动、鼠标松开

原理：鼠标按下时，添加鼠标移动、鼠标松开的事件处理函数，鼠标移动时获取鼠标坐标，改变元素样式，鼠标松开时清除鼠标移动和鼠标松开的事件处理函数

Index

.box {

position: absolute;

top: 0;

left: 0;

width: 100px;

height: 100px;

background-color: red;

}

var box = document.getElementsByTagName('div')[0];

box.onmousedown = function (ev) {

var ev = ev || window.event,

x = pagePos(ev).X - parseInt(getStyles(box)['left']),

y = pagePos(ev).Y - parseInt(getStyles(box)['top']);

document.onmousemove = function (ev) {

var ev = ev || window.event,

mPos = pagePos(ev);

box.style.left = mPos.X - x + 'px';

box.style.top = mPos.Y - y + 'px';

}

document.onmouseup = function () {

this.onmousemove = null;

this.onmouseup = null;

}

}

// 封装的函数：获取鼠标相对整个文档的坐标

function pagePos(ev) {

var sTop = getScrollOffset().top,

sLeft = getScrollOffset().left,

cTop = document.documentElement.clientTop || 0,

cLeft = document.documentElement.clientLeft || 0;

return {

X: ev.clientX + sLeft - cLeft,

Y: ev.clientY + sTop - cTop

}

}

// 封装的函数：获取滚动条滚动距离

function getScrollOffset() {

if (window.pageXOffset) {

return {

top: window.pageYOffset,

left: window.pageXOffset

}

} else return {

top: document.body.scrollTop || document.documentElement.scrollTop,

left: document.body.scrollLeft || document.documentElement.scrollLeft

}

}

// 封装的函数：获取元素样式的类数组

function getStyles(elem) {

if (window.getComputedStyle) {

return window.getComputedStyle(elem, null);

} else return elem.currentStyle;

}

封装拖拽函数 var box = document.getElementsByTagName('div')[0];

elemDrag(box);

// 封装的拖拽函数

function elemDrag(elem) {

var x,

y;

addEvent(elem, 'mousedown', function (ev) {

var ev = ev || window.event;

x = pagePos(ev).X - parseInt(getStyles(elem)['left']);

y = pagePos(ev).Y - parseInt(getStyles(elem)['top']);

addEvent(document, 'mousemove', mousemove);

addEvent(document, 'mouseup', mouseup);

cancelBubble(ev);

preventDefaultEvent(ev);

});

function mousemove(ev) {

var ev = ev || window.event;

elem.style.left = pagePos(ev).X - x + 'px';

elem.style.top = pagePos(ev).Y - y + 'px';

}

function mouseup(ev) {

var ev = ev || window.event;

removeEvent(document, 'mousemove', mousemove);

removeEvent(document, 'mouseup', mouseup);

}

}

// 绑定事件处理函数

function addEvent(elem, type, fn) {

if (elem.addEventListener) {

elem.addEventListener(type, fn);

} else if (elem.attachEvent) {

elem.attachEvent('on' + type, function (ev) {

fn.call(elem, ev); // call 兼容性比 bind 好

});

} else {

elem['on' + type] = fn;

}

}

// 解绑事件处理函数

function removeEvent(elem, type, fn) {

if (elem.addEventListener) {

elem.removeEventListener(type, fn);

} else if (elem.attachEvent) {

elem.detachEvent('on' + type, fn);

} else {

elem['on' + type] = null;

}

}

// 获取鼠标在整个文档中的坐标

function pagePos(ev) {

var sTop = getScrollOffset().top,

sLeft = getScrollOffset().left,

cTop = document.documentElement.clientTop || 0,

cLeft = document.documentElement.clientLeft || 0;

return {

X: ev.clientX + sLeft - cLeft,

Y: ev.clientY + sTop - cTop

}

}

// 获取滚动条滚动距离

function getScrollOffset() {

if (window.pageXOffset) {

return {

top: window.pageYOffset,

left: window.pageXOffset

}

} else return {

top: document.body.scrollTop || document.documentElement.scrollTop,

left: document.body.scrollLeft || document.documentElement.scrollLeft

}

}

// 获取元素样式的类数组

function getStyles(elem) {

if (window.getComputedStyle) {

return window.getComputedStyle(elem, null);

} else return elem.currentStyle;

}

// 阻止冒泡

function cancelBubble(ev) {

if (ev.stopPropagation) {

ev.stopPropagation();

} else ev.cancelBubble = true; // 兼容 IE8 及以下

}

// 阻止默认事件

function preventDefaultEvent(ev) {

if (ev.preventDefault) {

ev.preventDefault();

} else ev.returnValue = false; // 兼容 IE8 及以下

}