一步一步理解拖拽Drag（三）
拖拽三部曲：
鼠标移动时，为其添加css样式。
鼠标抬起时，移除css样式。
可以设置水平移动、垂直移动、禁止移动。
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一步一步理解拖拽Drag（三）</title>
<style type="text/css">
.moving{opacity: 0.6;filter: alpha(opacity=60);}
</style>
<script type="text/javascript">
var base = {
getId: function (id) {
return document.getElementById(id);
},
addEvent: function (element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
}
else {
element["on" + type] = fn;
}
},
removeEvent: function (element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
}
else if (element.detachEvent) {
element.detachEvent("on" + type, fn);
}
else {
element["on" + type] = null;
}
},
unDefaultEvent: function (event) {
if (event && event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
};
(function () {
function Drag(obj, moveCss, moveX, moveY) {
this.obj = obj;
this.moveCss = moveCss; // 设置移动时的样式
this.moveX = moveX; // boolean
this.moveY = moveY; // boolean
this.disX = this.disY = 0;
var _this = this;
base.addEvent(obj, "mousedown", function (event) {
_this.startDrag(event);
});
}
Drag.prototype = {
startDrag: function (event) {
base.unDefaultEvent(event);
var _this = this;
this.disX = event.clientX - this.obj.offsetLeft;
this.disY = event.clientY - this.obj.offsetTop;
this.mousemoveHandle = function (event) {
_this.move(event);
};
this.mouseupHandle = function () {
_this.stopDrag();
};
base.addEvent(document, "mousemove", this.mousemoveHandle);
base.addEvent(document, "mouseup", this.mouseupHandle);
if (document.selection && document.selection.empty) {
document.selection.empty();
}
else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
if (this.obj.setCapture) {
this.obj.setCapture(true);
}
},
move: function (event) {
base.unDefaultEvent(event);
this.obj.className = this.moveCss;
if (true == this.moveX && true == this.moveY) {
}
else if (true == this.moveX) {
this.obj.style.left = event.clientX - this.disX + "px";
}
else if (true == this.moveY) {
this.obj.style.top = event.clientY - this.disY + "px";
}
else {
this.obj.style.left = event.clientX - this.disX + "px";
this.obj.style.top = event.clientY - this.disY + "px";
}
},
stopDrag: function () {
this.obj.className = "";
base.removeEvent(document, "mousemove", this.mousemoveHandle);
base.removeEvent(document, "mouseup", this.mouseupHandle);
if (this.obj.releaseCapture) {
this.obj.releaseCapture(true);
}
}
};
base.addEvent(window, "load", function (event) {
var odiv = base.getId("mdiv");
// new Drag(odiv);
// new Drag(odiv,"moving");
// new Drag(odiv,"moving",false,false);
// new Drag(odiv,"moving",true); //水平移动
// new Drag(odiv,"moving",false,true); //垂直移动
new Drag(odiv, "moving", true, true); //禁止移动
});
})();
</script>
</head>
<body>
<div id="mdiv" style="width: 300px; height: 100px; position: absolute; border: 30px solid red;
cursor: move">
</div>
</body>
</html>
