一步一步理解拖拽Drag(三)

拖拽三部曲:
     鼠标移动时,为其添加css样式。
     鼠标抬起时,移除css样式。
     可以设置水平移动、垂直移动、禁止移动。

一步一步理解拖拽Drag(三)一步一步理解拖拽Drag(三)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>

 

上一篇:一步一步理解拖拽Drag(四)


下一篇:一步一步理解Ajax(一)