点击需要拖动元素时，获取该元素的初始位置。
鼠标移动期间 获取元素当前的位置信息
计算
进行事件监听
拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；
问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，
解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。
拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）
处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。
正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。
在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。
首先是三个事件，分别是 mousedown ， mousemove ， mouseup
当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的具体方法。
clientX ， clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：
鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为：
鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top 等等值。
补充：也可以通过 html5 的拖放（Drag 和 drop）来实现
js拖拽
采用简单的闭包实现方式
代码如下:
/**
* Created with JetBrains WebStorm
* User: lsj
* Date:
* Time: 下午 :
* To change this template use File | Settings | File Templates
*/
var dragmanager=(function()
{
//标识移动元素z轴坐标
var index_z=
//当前的拖拽元素
var drganow
//移动标识符号
var dragbegin=false
//鼠标点击时距离div左边距离
var relativex=
//鼠标点击时距离div上边距离
var relativey=
//标识鼠标是否移出
var isout=false
return {
/**
* 为document绑定鼠标提起事件 主要防止鼠标移动过快跳出el区域
*/
bingDocOnMouseUp:function()
{
//注册全局的onmouseup事件 主要防止鼠标移动过快导致鼠标和el不同步
document onmouseup=function(e)
{
var ev = window event || e
if(isout &&dragbegin)
{
//改变div的相对位置
drganow style left= (ev clientX relativex)+ px
drganow style top=(ev clientY relativey)+ px
drganow style cursor= normal
dragbegin=false
isout=false
}
}
}
/**
* 将注入的元素绑定事件
* @param el
*/
registerElementEv:function(element)
{
element onmousedown=function(e)
{
var ev = window event || e
var clientx=ev clientX
var clienty= ev clientY
var left= parseInt(this style left substring( this style left indexOf("p")))
var top= parseInt(this style top substring( this style top indexOf("p")))
relativex=clientx left
relativey=clienty top
index_z++
this style zIndex=index_z
drganow=this
dragbegin=true
}
element onmousemove=function(e)
{
var ev = window event || e
//开始拖拽
if(dragbegin)
{
//改变div的相对位置
this style left= (ev clientX relativex)+ px
this style top=(ev clientY relativey)+ px
this style cursor= move
}
}
element onmouseout=function(e)
{
isout=true
}
element onmouseup=function(e)
{
var ev = window event || e
if(dragbegin)
{
//改变div的相对位置
drganow style left= (ev clientX relativex)+ px
drganow style top=(ev clientY relativey)+ px
drganow style cursor= normal
dragbegin=false
}
}
}
}
})()
采用闭包的形式实现 方便后期的维护 将移动过程所需的变量全部转移进gridmanager里面
拖拽过程中 鼠标移动过快导致移动元素跟不上鼠标的移动 所以要注册document oumouseup事件 该事件的开关是有移动元素的onmouseout事件触发的
lishixinzhi/Article/program/Java/JSP/201311/20315
