这是一个面向对象的JS拖拽库，可设置水平锁定、垂直锁定、锁定位置、锁定范围等，设定这些范围后，只能在设定的模式下拖动，我觉得这是个挺不错的拖拽实例。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-mxdx-draw-plug-codes/
具体代码如下：
<!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>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>拖拽库</title>
<style
type="text/css">
div,h2,p{margin:0padding:0}
body{font:14px/1.5
arial}
#box{width:100pxheight:100pxbackground:#fef4ebpadding:5pxmargin:50pxborder:1px
solid
#f60}
#box
.title{height:25pxbackground:#f60}
#tool{margin-bottom:10px}
</style>
<script
type="text/javascript">
function
Drag()
{
//初始化
this.initialize.apply(this,
arguments)
}
Drag.prototype
=
{
//初始化
initialize
:
function
(drag,
options)
{
this.drag
=
this.$(drag)
this._x
=
this._y
=
0
this._moveDrag
=
this.bind(this,
this.moveDrag)
this._stopDrag
=
this.bind(this,
this.stopDrag)
this.setOptions(options)
this.handle
=
this.$(this.options.handle)
this.maxContainer
=
this.$(this.options.maxContainer)
this.maxTop
=
Math.max(this.maxContainer.clientHeight,
this.maxContainer.scrollHeight)
-
this.drag.offsetHeight
this.maxLeft
=
Math.max(this.maxContainer.clientWidth,
this.maxContainer.scrollWidth)
-
this.drag.offsetWidth
this.limit
=
this.options.limit
this.lockX
=
this.options.lockX
this.lockY
=
this.options.lockY
this.lock
=
this.options.lock
this.onStart
=
this.options.onStart
this.onMove
=
this.options.onMove
this.onStop
=
this.options.onStop
this.handle.style.cursor
=
"move"
this.changeLayout()
this.addHandler(this.handle,
"mousedown",
this.bind(this,
this.startDrag))
},
changeLayout
:
function
()
{
this.drag.style.top
=
this.drag.offsetTop
+
"px"
this.drag.style.left
=
this.drag.offsetLeft
+
"px"
this.drag.style.position
=
"absolute"
this.drag.style.margin
=
"0"
},
startDrag
:
function
(event)
{
var
event
=
event
||
window.event
this._x
=
event.clientX
-
this.drag.offsetLeft
this._y
=
event.clientY
-
this.drag.offsetTop
this.addHandler(document,
"mousemove",
this._moveDrag)
this.addHandler(document,
"mouseup",
this._stopDrag)
event.preventDefault
&&
event.preventDefault()
this.handle.setCapture
&&
this.handle.setCapture()
this.onStart()
},
moveDrag
:
function
(event)
{
var
event
=
event
||
window.event
var
iTop
=
event.clientY
-
this._y
var
iLeft
=
event.clientX
-
this._x
if
(this.lock)
return
this.limit
&&
(iTop
<
0
&&
(iTop
=
0),
iLeft
<
0
&&
(iLeft
=
0),
iTop
>
this.maxTop
&&
(iTop
=
this.maxTop),
iLeft
>
this.maxLeft
&&
(iLeft
=
this.maxLeft))
this.lockY
||
(this.drag.style.top
=
iTop
+
"px")
this.lockX
||
(this.drag.style.left
=
iLeft
+
"px")
event.preventDefault
&&
event.preventDefault()
this.onMove()
},
stopDrag
:
function
()
{
this.removeHandler(document,
"mousemove",
this._moveDrag)
this.removeHandler(document,
"mouseup",
this._stopDrag)
this.handle.releaseCapture
&&
this.handle.releaseCapture()
this.onStop()
},
//参数设置
setOptions
:
function
(options)
{
this.options
=
{
handle:
this.drag,
//事件对象
limit:
true,
//锁定范围
lock:
false,
//锁定位置
lockX:
false,
//锁定水平位置
lockY:
false,
//锁定垂直位置
maxContainer:
document.documentElement
||
document.body,
//指定限制容器
onStart:
function
()
{},
//开始时回调函数
onMove:
function
()
{},
//拖拽时回调函数
onStop:
function
()
{}
//停止时回调函数
}
for
(var
p
in
options)
this.options[p]
=
options[p]
},
//获取id
$
:
function
(id)
{
return
typeof
id
===
"string"
?
document.getElementById(id)
:
id
},
//添加绑定事件
addHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.addEventListener
?
oElement.addEventListener(sEventType,
fnHandler,
false)
:
oElement.attachEvent("on"
+
sEventType,
fnHandler)
},
//删除绑定事件
removeHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.removeEventListener
?
oElement.removeEventListener(sEventType,
fnHandler,
false)
:
oElement.detachEvent("on"
+
sEventType,
fnHandler)
},
//绑定事件到对象
bind
:
function
(object,
fnHandler)
{
return
function
()
{
return
fnHandler.apply(object,
arguments)
}
}
}
//应用
window.onload
=
function
()
{
var
oBox
=
document.getElementById("box")
var
oTitle
=
oBox.getElementsByTagName("h2")[0]
var
oSpan
=
document.getElementsByTagName("span")[0]
var
oDrag
=
new
Drag(oBox,
{handle:oTitle,
limit:false})
var
aInput
=
document.getElementsByTagName("input")
//锁定范围接口
aInput[0].onclick
=
function
()
{
oDrag.limit
=
!oDrag.limit
this.value
=
oDrag.limit
?
"取消锁定范围"
:
"锁定范围"
}
//水平锁定接口
aInput[1].onclick
=
function
()
{
oDrag.lockX
=
!oDrag.lockX
this.value
=
oDrag.lockX
?
"取消水平锁定"
:
"水平锁定"
}
//垂直锁定接口
aInput[2].onclick
=
function
()
{
oDrag.lockY
=
!oDrag.lockY
this.value
=
oDrag.lockY
?
"取消垂直锁定"
:
"垂直锁定"
}
//锁定位置接口
aInput[3].onclick
=
function
()
{
oDrag.lock
=
!oDrag.lock
this.value
=
oDrag.lock
?
"取消锁定位置"
:
"锁定位置"
}
//开始拖拽时方法
oDrag.onStart
=
function
()
{
oSpan.innerHTML
=
"开始拖拽"
}
//开始拖拽时方法
oDrag.onMove
=
function
()
{
oSpan.innerHTML
=
"left:"
+
this.drag.offsetLeft
+
",
top:"
+
this.drag.offsetTop
}
//开始拖拽时方法
oDrag.onStop
=
function
()
{
oSpan.innerHTML
=
"结束拖拽"
}
}
</script>
</head>
<body>
<div
id="tool">
<input
type="button"
value="锁定范围"
/>
<input
type="button"
value="水平锁定"
/>
<input
type="button"
value="垂直锁定"
/>
<input
type="button"
value="锁定位置"
/>
</div>
<p>拖放状态：<span>未开始</span></p>
<div
id="box">
<h2
class="title"></h2>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
为了能够清楚的解释这一切，我先从对象讲起。从其他面向对象语言（如Java）而来的人可能认为在JS里的对象也是由类来实例化出来的，并且是由属性和方法组成的。实际上在JS里并不是如你所想（我开始是这么想的）那样，对象或直接称为object，实际上只是一些映射对的集合，像Map，字典等概念。JS里有大概7种类型（加上Symbol），数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型，就是说它们比较单纯，包含的东西比较少，基本上就是字面量所表示的那些（像C语言中的一些类型，就是占那么多空间，没有其他的东西）。object基本上是一些键值对的集合，属于引用类型，即是有一个名字去指向它来供别人使用的，就好像比较重的东西你拿不动，而只是拿了张记录东西所在地的纸条。所以当A对象里嵌套了B对象，仅表示A里面有一个引用指向了B，并不是真正把B包含在A里面，虽然看起来是这样（尤其是从对象的字面量上来看），所以才会有所谓的深拷贝与浅拷贝。
有句话叫“JavaScript里一切皆对象”，是因为在很多情况下原始类型会被自动的转为对象，而函数实际上也是对象，这样这句话看起来就很有道理了。
说明对象的本质是为了正确地认识对象，因为这关系到后面的理解。
1，html写好界面，定义好class和id2，为了模拟出扑克牌21点游戏，应先定义卡牌池中有1-10，J,Q,K每个数字和字母分别有4个
3，js中实现界面交互，如点击开始按钮，随机从卡牌池中抽取一个数字或字母存入临时变量a，并附于点数之和num其相应的点数
4，点击抽牌按钮随机从卡牌池剩余的卡牌中抽取，对应的卡牌存入变量a中，点数之和num=num+本次抽卡的点数
5，当num>21时提示玩家爆点，小于21点时可选按钮抽牌，等于21点时提示恭喜之类的话，如果点击完成抽牌则记录此玩家点数
6，同理可扩充玩家至2,3,4....个，原理相同，不同玩家存储对应的变量就可以了，最终通过所有<=21点的玩家num,num1,num2来判断输赢
7，同理可设置庄家，庄家在与其他玩家点数相同时赢得对方
8，在此基础上就能增添许多功能了，比如每个玩家默认100金币，有底注，每轮开始的时候可加注，如玩家不跟则底注输掉无法参加游戏，等等之类的各种规则随便发挥
