版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fanfanzk1314/article/details/79412067
<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top: 0;"></div>
js实现:
var div = document.getElementsByTagName('div')[0];
var disx, disy;
div.onmousedown = function (e) {
disx = e.pageX - parseInt(div.style.left);
disy = e.pageY - parseInt(div.style.top);
document.onmousemove = function (e) {
var e = e || window.event;
console.log(e.pageX + " " + e.pageY)
div.style.left = e.pageX - disx + "px";
div.style.top = e.pageY - disy + "px";
}
document.onmouseup = function () {
div.onmousedown = null;
}
}
使用函数实现:
function drag(elem) {
var disx, disy;
addEvent(elem, 'mousedown', function (e) {
var event = e || window.event;
disx = event.clientX - parseInt(getStyle(elem, 'left'));
disy = event.clientY - parseInt(getStyle(elem, 'top'));
addEvent(document, 'mousemove', mouseMove);
addEvent(document, 'mousemoup', mouseUp);
stopBubble(event);
cancelHandle(event);
function cancelHandle(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
function stopBubble(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
function mouseMove(e) {
var event = e || window.event;
elem.style.left = event.clientX - disx + "px";
elem.style.top = event.clientY - disy + "px";
}
function mouseUp(e) {
var event = e || window.event;
removeEvent(document, 'mousemove', mouseMove);
removeEvent(document, 'mousemoup', mouseUp);
}
})
}