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不同步
documentonmouseup=function(e)
{
var ev = windowevent || e;
if(isout && dragbegin)
{
//改变div的相对位置
drganowstyleleft= (evclientXrelativex)+px;
drganowstyletop=(evclientYrelativey)+px;
drganowstylecursor=normal;
dragbegin=false;
isout=false;
}
}
}
/**
* 将注入的元素绑定事件
* @param el
*/
registerElementEv:function(element)
{
elementonmousedown=function(e)
{
var ev = windowevent || e;
var clientx=evclientX;
var clienty= evclientY;
var left= parseInt(thisstyleleftsubstring( thisstyleleftindexOf("p")));
var top= parseInt(thisstyletopsubstring( thisstyletopindexOf("p")));
relativex=clientxleft;
relativey=clientytop;
index_z++;
thisstylezIndex=index_z;
drganow=this;
dragbegin=true;
}
elementonmousemove=function(e)
{
var ev = windowevent || e;
//开始拖拽
if(dragbegin)
{
//改变div的相对位置
thisstyleleft= (evclientXrelativex)+px;
thisstyletop=(evclientYrelativey)+px;
thisstylecursor=move;
}
}
elementonmouseout=function(e)
{
isout=true;
}
elementonmouseup=function(e)
{
var ev = windowevent || e;
if(dragbegin)
{
//改变div的相对位置
drganowstyleleft= (evclientXrelativex)+px;
drganowstyletop=(evclientYrelativey)+px;
drganowstylecursor=normal;
dragbegin=false;
}
}
}
}
})();
采用闭包的形式实现 方便后期的维护将移动过程所需的变量全部转移进gridmanager里面
拖拽过程中 鼠标移动过快导致移动元素跟不上鼠标的移动所以要注册documentoumouseup事件该事件的开关是有移动元素的onmouseout事件触发的
拖拽的过程中可能会触发浏览器自身的onmousemove的select事件可以进行屏蔽ie下是onmousemove="documentselectionempty()"
