/**
* Created with JetBrains WebStorm.
* User: lsj
* Date: 12-11-24
* Time: 下午12:59
* To change this template use File | Settings | File Templates.
*/
var dragmanager=(function()
{
//標識移動元素z軸坐標
var index_z=1;
//當前的拖拽元素
var drganow;
//移動標識符號
var dragbegin=false;
//鼠標點擊時距離div左邊距離
var relativex=0;
//鼠標點擊時距離div上邊距離
var relativey=0;
//標識鼠標是否移出
var isout=false;
return {
/**
* 為document綁定鼠標提起事件，主要防止鼠標移動過快跳出el區(qū)域
*/
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(0, this.style.left.indexOf("p")));
var top= parseInt(this.style.top.substring(0, 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;
}
}
}
}
})();