接下来是理解之后的实例
001 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
002 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
003 |
<head> |
004 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
005 |
<title>简易拖放效果</title> |
006 |
</head> |
007 |
<body> |
008 |
<script> |
009 |
//参考：http://www.javaeye.com/topic/57760 |
011 |
|
012 |
//简化id选择器 |
013 |
var isIE = (document.all) ? true : false; |
014 |
var $ = function (id) { |
015 |
return "string" == typeof id ? document.getElementById(id) : id; |
016 |
}; |
017 |
|
018 |
//初始化一个 Class 对象， 它有一个成员，是一个方法， 这个方法返因另一个方法（方法是对象，所以可以作为参数或者返回值） |
019 |
var Class = { |
020 |
create: function() { |
021 |
return function() { //使用new操作符时，就会在新产生的对象上调用这个方法 |
022 |
this.initialize.apply(this, arguments); //这里就是调用 this 对象上的 initialize方法， 并传递 arguments，这里的this是new之后构造出来的对象 |
023 |
} |
024 |
} |
025 |
} |
026 |
|
027 |
//继承，这里没有用到 |
028 |
var Extend = function(destination, source) { |
029 |
for (var property in source) { |
030 |
destination[property] = source[property]; |
031 |
} |
032 |
} |
033 |
|
034 |
//参数传递 |
035 |
//object参数，fun方法 |
036 |
var Bind = function(object, fun) { |
037 |
return function() { |
038 |
return fun.apply(object, arguments); |
039 |
} |
040 |
} |
041 |
|
042 |
//事件传递 |
043 |
//object参数，fun方法 |
044 |
var BindAsEventListener = function(object, fun) { |
045 |
return function(event) { |
046 |
return fun.call(object, (event || window.event)); |
047 |
} |
048 |
} |
049 |
|
050 |
//事件绑定 |
051 |
//oTarget绑定目标，sEventType事件类型，fnHandler事件方法 |
052 |
function addEventHandler(oTarget, sEventType, fnHandler) { |
053 |
if (oTarget.addEventListener) { //FF |
054 |
oTarget.addEventListener(sEventType, fnHandler, false); |
055 |
} else if (oTarget.attachEvent) { //IE |
056 |
oTarget.attachEvent("on" + sEventType, fnHandler); |
057 |
} else { |
058 |
oTarget["on" + sEventType] = fnHandler; |
059 |
} |
060 |
}; |
061 |
|
062 |
//移除事件绑定 |
063 |
//oTarget绑定目标，sEventType事件类型，fnHandler事件方法 |
064 |
function removeEventHandler(oTarget, sEventType, fnHandler) { |
065 |
if (oTarget.removeEventListener) { //FF |
066 |
oTarget.removeEventListener(sEventType, fnHandler, false); |
067 |
} else if (oTarget.detachEvent) { //IE |
068 |
oTarget.detachEvent("on" + sEventType, fnHandler); |
069 |
} else { |
070 |
oTarget["on" + sEventType] = null; |
071 |
} |
072 |
}; |
073 |
|
074 |
//SimpleDrag是一个方法，方法体，这里相当于一个类 |
075 |
var SimpleDrag = Class.create(); |
076 |
SimpleDrag.prototype = { |
077 |
//对象初始化，实现Class中的this.initialize |
078 |
initialize: function(drag) { |
079 |
this.Drag = $(drag); //绑定目标 |
080 |
this._x = this._y = 0; //初始值 |
081 |
this._fnMove = BindAsEventListener(this, this.Move); |
082 |
this._fnStop = Bind(this, this.Stop); |
083 |
this.Drag.style.position = "absolute"; |
084 |
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));//监听鼠标按下事件 |
085 |
}, |
086 |
//准备拖动 |
087 |
Start: function(oEvent) { |
088 |
this._x = oEvent.clientX - this.Drag.offsetLeft; |
089 |
this._y = oEvent.clientY - this.Drag.offsetTop; |
090 |
addEventHandler(document, "mousemove", this._fnMove); //对象开始拖动后，监听鼠标移动事件 |
091 |
addEventHandler(document, "mouseup", this._fnStop); //同时监听鼠标放开事件 |
092 |
}, |
093 |
//拖动 |
094 |
Move: function(oEvent) { |
095 |
this.Drag.style.left = oEvent.clientX - this._x + "px"; |
096 |
this.Drag.style.top = oEvent.clientY - this._y + "px"; |
097 |
}, |
098 |
//停止拖动 |
099 |
Stop: function() { |
100 |
removeEventHandler(document, "mousemove", this._fnMove); |
101 |
removeEventHandler(document, "mouseup", this._fnStop); |
102 |
} |
103 |
}; |
104 |
</script> |
105 |
<div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; 50px; height:50px;"></div> |
106 |
<script> |
107 |
new SimpleDrag("idDrag"); |
108 |
</script> |
109 |
</body> |
110 |
</html> |