JS基于面向对象实现的拖拽库实例

JavaScript023

JS基于面向对象实现的拖拽库实例,第1张

本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下：

这是一个面向对象的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和id

2，为了模拟出扑克牌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金币，有底注，每轮开始的时候可加注，如玩家不跟则底注输掉无法参加游戏，等等之类的各种规则随便发挥