本文介绍了用于实现元素拖动的原始Javaｓｃｒｉｐｔ。

思想:

1。首先，改变布局拖动元素的属性，关键是位置：兰蔻；

2。捕获鼠标事件mouseDown

三.当鼠标被触发，在元素当前鼠标的相对位置记录，_x，_y；

4。然后把鼠标移动事件，通过改变前和单元属性的元素的左移；

5。当mouseup时间触发，拖动终止。

同时，您应该考虑代码的封装性和浏览器的兼容性。代码如下：





拖动div

体{
保证金：0；
填充：0；
背景颜色：# FFF；
}

# drag_div {
宽度：150px；
身高：150px；
填料：10px；
保证金：10px；
背景颜色：# 66dd33；
光标移动；
}








函数拖动（）{
This.initialize.apply（这个参数）；
}

drag.prototype = { {

初始化
初始化：函数（元素，选项）{

this.element =这。$（元）； / /拖动对象
这个_x =这。_y = 0； / /鼠标在元素位置
这个_movedrag = this.bind（这，这，movedrag）；
这个_stopdrag = this.bind（这，这，停止拖动）；

设置参数
this.setoptions（选项）；

设置鼠标拖动手柄/对象（对象和拖动差异）
this.handle =这。$（这个选项。处理）；

返回函数
this.onstart = this.options.onstart；
this.onmove = this.options.onmove；
this.onstop = this.options.onstop；

this.handle.style.cursor =搬家；

This.changeLayout（）；

用于启动拖动事件的寄存器
This.addHandler（this.handle MouseDown ，
}，

更改布局属性拖动对象
ChangeLayout：函数（）{
this.element.style.top = this.element.offsettop +PX；
this.element.style.left = this.element.offsetleft +PX；
this.element.style.position =绝对；
this.element.style.margin =0；
}，

StartDrag：功能（事件）{
var =事件| | window.event事件；

这_x = event.clientx - this.element.offsetleft；
这_y = event.clienty - this.element.offsettop；

This.addHandler（文档，MouseMove
This.addHandler（文档，MouseUp

This.preventDefault（事件）；

this.handle.setcapture this.handle.setcapture（）；

This.onStart（）；
}，
MoveDrag：功能（事件）{
var = this.getevent事件（事件）；

VaR ITOP = event.clienty _y这；
VaR event.clientx -这_x离开=；

this.element.style.top =机遇+PX；
this.element.style.left =离开+PX；

This.onMove（）；
}，
停止拖动：函数（）{

This.removeHandler（文档，MouseMove
This.removeHandler（文档，MouseUp
this.handle.releasecapture this.handle.releasecapture（）；

This.onStop（）

}，
setOptions：功能（选项）{
this.options = { {
处理：this.element / /事件对象
OnStart：函数（）{ }， / /在回调函数开始
OnMove：函数（）{ }， / /阻力回调函数
OnStop：函数（）{ } / /停止回调函数
}；
对于（选项中的var）{
这个选项；
}
}，
$：函数（id）{
返回类型ID =字符串document.getelementbyid ID（ID）；
}，
AddHandler：功能（元素、事件类型、Handler）{
如果（元。addEventListener）{
返回element.addeventlistener（事件类型、处理程序、错误）；
其他{ }
返回element.attachevent（+事件类型、处理）；
}
}，
RemoveHandler：功能（元素、事件类型、Handler）{
如果（元。removeEventListener）{
返回element.removeeventlistener（事件类型、处理程序、错误）；
其他{ }
返回element.detachevent（+事件类型、处理）；
}
}，
匀：功能（事件）{
返回事件window.event | |；
}，
PreventDefault：功能（事件）{
如果（事件。preventDefault）{
Event.preventDefault（）；
其他{ }
event.returnvalue = false；
}
}，
绑定：功能（obj，Handler）{
返回函数（）{
返回handler.apply（obj参数）；
}
}
}；

在window.onload =函数（）{
无功drag_div = document.getelementbyid（drag_div ）；

VaR拖=新的阻力（drag_div，{处理：drag_div }）；
}