昨天在做新插件时加入DIV层的拖动效果,开始时试用了好多方法,都有很多的问题,要么就是只支持IE,不支持FF等其它浏览器,要么都支持,但是在FF里这个DIV里面的东西却得不到焦点,也就不用输入和选择等,一点都不方便,直到我找到一个好代码,将里面的东西稍微修改一下,就很好做了.

好东西放到最后,先放出两个我用过的,有些问题的方法,以供大家讨论,哈哈


--------------------------------------------------------------------------------

第一个,测试后发现只支持IE: 使用方法:onmousemove=onMouseMove(DIV_ID);

 
  var Obj=''
var index=10000;//z-index;
document.onmouseup=onMouseUp
document.onmousemove=onMouseMove
function onMouseDown(Object){
 Obj=Object.id
 document.all(Obj).setCapture()
 pX=event.x-document.all(Obj).style.pixelLeft;
 pY=event.y-document.all(Obj).style.pixelTop;
}

function onMouseMove(){
 if(Obj!=''){
  document.all(Obj).style.left=event.x-pX;
  document.all(Obj).style.top=event.y-pY;
 }
}

function onMouseUp(){
 if(Obj!=''){
  document.all(Obj).releaseCapture();
  Obj='';
 }
}

function onFocus(obj){
       if(obj.style.zIndex!=index) {
               index = index + 2;
               var idx = index;
               obj.style.zIndex=idx;
       }
}

function onRemove(){
 if (event){
  lObj = event.srcElement ;
  n=0;
  while (lObj && n<2) {
   lObj = lObj.parentElement ;
   if(lObj.tagName=="DIV") n++;

  }
 }
 var id=lObj.id
 document.getElementById(id).removeNode(true);

}
function ShowBox(dname)
{
  var buyDiv=document.getElementById(dname+'SelName');
  var objDiv=document.getElementById('objText');
  var disable=document.getElementById('disableDiv');
  if(buyDiv.style.display=='none')
  {
   buyDiv.style.display='block';
   disable.style.display='block';
   buyDiv.innerHTML=objDiv.innerHTML;

  }else{
   buyDiv.style.display='none';
   disable.style.display='none';
  }
}

var Obj=''<br/>var index=10000;//z-index;<br/>document.onmouseup=onMouseUp<br/>document.onmousemove=onMouseMove<br/>function onMouseDown(Object){<br/> Obj=Object.id<br/> document.all(Obj).setCapture()<br/> pX=event.x-document.all(Obj).style.pixelLeft;<br/> pY=event.y-document.all(Obj).style.pixelTop;<br/>}<br/><br/>function onMouseMove(){<br/> if(Obj!=''){<br/> document.all(Obj).style.left=event.x-pX;<br/> document.all(Obj).style.top=event.y-pY;<br/> }<br/>}<br/><br/>function onMouseUp(){<br/> if(Obj!=''){<br/> document.all(Obj).releaseCapture();<br/> Obj='';<br/> }<br/>}<br/><br/>function onFocus(obj){<br/> if(obj.style.zIndex!=index) {<br/> index = index + 2;<br/> var idx = index;<br/> obj.style.zIndex=idx;<br/> }<br/>}<br/><br/>function onRemove(){<br/> if (event){<br/> lObj = event.srcElement ;<br/> n=0;<br/> while (lObj && n<2) {<br/> lObj = lObj.parentElement ;<br/> if(lObj.tagName=="DIV") n++;<br/><br/> }<br/> }<br/> var id=lObj.id<br/> document.getElementById(id).removeNode(true);<br/><br/>}<br/>function ShowBox(dname)<br/>{<br/> var buyDiv=document.getElementById(dname+'SelName');<br/> var objDiv=document.getElementById('objText');<br/> var disable=document.getElementById('disableDiv');<br/> if(buyDiv.style.display=='none')<br/> {<br/> buyDiv.style.display='block';<br/> disable.style.display='block';<br/> buyDiv.innerHTML=objDiv.innerHTML;<br/><br/> }else{<br/> buyDiv.style.display='none';<br/> disable.style.display='none';<br/> }<br/>}<br/>



--------------------------------------------------------------------------------

第二个办法:IE和FF下都能拖动,但是在FF下,这个DIV层里的东西不能得到焦点等,相当于是只读的,而且还不能选中内容 :使用办法比较复杂, 将下面代码中的"bfla"改成你要拖动的层的class.

  

// Author:  Unkonw 
// Modify:  枫岩@CnLei.com 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
var isdrag=false; 
var y,x; 
var oDragObj; 
document.onmousedown=initDrag; 
document.onmouseup=new Function("isdrag=false"); 

function moveMouse(e) { 
 if (isdrag) { 
 oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; 
 oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; 
 return false; 
 } 
} ;

function initDrag(e) { 
 var oDragHandle = nn6 ? e.target : event.srcElement; 
 var topElement = "HTML"; 
 while (oDragHandle.tagName != topElement && oDragHandle.className != "bfla") { 
 oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; 
 } 
 if (oDragHandle.className=="bfla") { 
 isdrag = true; 
 oDragObj = oDragHandle; 
 nTY = parseInt(oDragObj.style.top+0); 
 y = nn6 ? e.clientY : event.clientY; 
 nTX = parseInt(oDragObj.style.left+0); 
 x = nn6 ? e.clientX : event.clientX; 
 document.onmousemove=moveMouse; 
 return false; 
 } 
} ;
 

<br/>// Author: Unkonw <br/>// Modify: 枫岩@CnLei.com <br/>var ie=document.all; <br/>var nn6=document.getElementById&&!document.all; <br/>var isdrag=false; <br/>var y,x; <br/>var oDragObj; <br/>document.onmousedown=initDrag; <br/>document.onmouseup=new Function("isdrag=false"); <br/><br/>function moveMouse(e) { <br/> if (isdrag) { <br/> oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; <br/> oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; <br/> return false; <br/> } <br/>} ;<br/><br/>function initDrag(e) { <br/> var oDragHandle = nn6 ? e.target : event.srcElement; <br/> var topElement = "HTML"; <br/> while (oDragHandle.tagName != topElement && oDragHandle.className != "bfla") { <br/> oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; <br/> } <br/> if (oDragHandle.className=="bfla") { <br/> isdrag = true; <br/> oDragObj = oDragHandle; <br/> nTY = parseInt(oDragObj.style.top+0); <br/> y = nn6 ? e.clientY : event.clientY; <br/> nTX = parseInt(oDragObj.style.left+0); <br/> x = nn6 ? e.clientX : event.clientX; <br/> document.onmousemove=moveMouse; <br/> return false; <br/> } <br/>} ;<br/>




--------------------------------------------------------------------------------

好了,现在亮出最好的办法,经过我的加工,现在有两种拖动效果了,一种是直接拖放到位,另一种是拖放后慢慢移动到位, 两种方式通过一个参数来分别,而且两种方式都有一个很COOL的影子效果(哈哈,加个版权,最近乱转载的现象太严重了,这个博客都是我原创的,心血啊.本文由:巴士飞扬原创,www.busfly.cn),,这个JS函数很好,很强大,这几天等我的插件发布后,大家可以通过使用我的插件来感受一下,顺便也透露一下,这个插件从头部上点击拖动,是第一种效果,直接拖放到位,从底部拖放是第二种效果,很美哦. 哈哈,真的很好很强大的JS函数,顶顶顶.

使用方法:onmousedown=""MyMove.Move('divID',event,0或者1)""

  
 
// onmousedown=""MyMove.Move('divID',event,0或者1)"" 
 // id 要移动的层ID 
// Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
// T 为 int 有数字1是拖动(直接拖放到位), 0是慢慢移动(拖放后慢慢移动到位)


  
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{
//参数说明
// id 要移动的层ID 
// Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
// T 为 int 有数字是拖动 没有是慢慢移动
this.Move=function(Id,Evt,T)
{
   if(Id=="") return;
   var o = document.getElementById(Id);
   if(!o) return;//如果这个东东不在
   evt = Evt ? Evt : window.event;
   o.style.position = "absolute";//设定他的样式为绝对定位
   o.style.zIndex = 200;//这里显示上下的
   var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素 使它在FF中也可以用
   //得到当前对要移动对象的 坐标
   var w = o.offsetWidth;
     var h = o.offsetHeight;
     var l = o.offsetLeft;
     var t = o.offsetTop;
     var div = document.createElement("DIV");//新原素DIV
   document.body.appendChild(div);
     div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity
     div.setAttribute("id", Id +"temp");
  
//拖动
    this.Move_OnlyMove(Id,evt,T);
}

//移动函数
//参数 Id 要移动的层ID 
//Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
this.Move_OnlyMove = function(Id,Evt,T)
{
   var o = document.getElementById(Id+"temp");
   if(!o) return;
   evt = Evt?Evt:window.event;//都是FF 才要这么写的
   var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
     var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
   //抓取 事件
   if (!window.captureEvents)
   {
     o.setCapture(); //指定 抓取 事件
     
   }
   else
   {
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
     }
  
   //文档的 onmousemove 事件
   document.onmousemove = function(e)
   {
    if (!o) return;
      e = e ? e : window.event;
      if (e.clientX - relLeft <= 0)
       o.style.left = 0 +"px";
      else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
       o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
      else
       o.style.left = e.clientX - relLeft +"px";
      if (e.clientY - relTop <= 1)
       o.style.top = 1 +"px";
      else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
       o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
      else
       o.style.top = e.clientY - relTop +"px";
   }
  
   //文档的 onmouseup 事件
   document.onmouseup = function()
     {
      if (!o) return;
      if (!window.captureEvents)
      o.releaseCapture();
      else
      window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
      var o1 = document.getElementById(Id);
      if (!o1) return;
      var l0 = o.offsetLeft;
      var t0 = o.offsetTop;
      var l = o1.offsetLeft;
      var t = o1.offsetTop; 
      MyMove.Move_e(Id, l0 , t0, l, t,T);
      document.body.removeChild(o);
      o = null;
     } 
}

this.Move_e = function(Id, l0 , t0, l, t,T)
    {
     if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
     var o = document.getElementById(Id);
     if (!o) return;
     var sl = st = 8;
     var s_l = Math.abs(l0 - l);
     var s_t = Math.abs(t0 - t);
     if (s_l - s_t > 0)
      if (s_t)
       sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
      else
       sl = 0;
     else
      if (s_l)
      st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
      else
       st = 0;
     if (l0 - l < 0) sl *= -1;
     if (t0 - t < 0) st *= -1;
     if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
     if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
     if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
     if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
     if (s_l == 0 && s_t == 0) return;
     if(T)
     {
   o.style.left = l0 +"px";
   o.style.top = t0 +"px";
   return;
     }
     else
     {
   if (Math.abs(l + sl - l0) < 2)
    o.style.left = l0 +"px";
   else
    o.style.left = l + sl +"px";
   if (Math.abs(t + st - t0) < 2) 
    o.style.top = t0 +"px";
   else
    o.style.top = t + st +"px";     
  window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +","+T+")", 1);
     }
    }


}
var MyMove = new Tong_MoveDiv();  

 

<br/>// onmousedown=""MyMove.Move('divID',event,0或者1)"" <br/> // id 要移动的层ID <br/>// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;<br/>// T 为 int 有数字1是拖动(直接拖放到位), 0是慢慢移动(拖放后慢慢移动到位)<br/><br/><br/> <br/>//通用 移动 Div 类<br/>//请保留一下我的信息,谢谢<br/>//Edit By Skybot<br/>//QQ:35287352<br/>function Tong_MoveDiv()<br/>{<br/>//参数说明<br/>// id 要移动的层ID <br/>// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;<br/>// T 为 int 有数字是拖动 没有是慢慢移动<br/>this.Move=function(Id,Evt,T)<br/>{<br/> if(Id=="") return;<br/> var o = document.getElementById(Id);<br/> if(!o) return;//如果这个东东不在<br/> evt = Evt ? Evt : window.event;<br/> o.style.position = "absolute";//设定他的样式为绝对定位<br/> o.style.zIndex = 200;//这里显示上下的<br/> var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素 使它在FF中也可以用<br/> //得到当前对要移动对象的 坐标<br/> var w = o.offsetWidth;<br/> var h = o.offsetHeight;<br/> var l = o.offsetLeft;<br/> var t = o.offsetTop;<br/> var div = document.createElement("DIV");//新原素DIV<br/> document.body.appendChild(div);<br/> div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity<br/> div.setAttribute("id", Id +"temp");<br/> <br/>//拖动<br/> this.Move_OnlyMove(Id,evt,T);<br/>}<br/><br/>//移动函数<br/>//参数 Id 要移动的层ID <br/>//Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;<br/>this.Move_OnlyMove = function(Id,Evt,T)<br/>{<br/> var o = document.getElementById(Id+"temp");<br/> if(!o) return;<br/> evt = Evt?Evt:window.event;//都是FF 才要这么写的<br/> var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度<br/> var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度<br/> //抓取 事件<br/> if (!window.captureEvents)<br/> {<br/> o.setCapture(); //指定 抓取 事件<br/> <br/> }<br/> else<br/> {<br/> window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/> }<br/> <br/> //文档的 onmousemove 事件<br/> document.onmousemove = function(e)<br/> {<br/> if (!o) return;<br/> e = e ? e : window.event;<br/> if (e.clientX - relLeft <= 0)<br/> o.style.left = 0 +"px";<br/> else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)<br/> o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";<br/> else<br/> o.style.left = e.clientX - relLeft +"px";<br/> if (e.clientY - relTop <= 1)<br/> o.style.top = 1 +"px";<br/> else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)<br/> o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";<br/> else<br/> o.style.top = e.clientY - relTop +"px";<br/> }<br/> <br/> //文档的 onmouseup 事件<br/> document.onmouseup = function()<br/> {<br/> if (!o) return;<br/> if (!window.captureEvents)<br/> o.releaseCapture();<br/> else<br/> window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/> var o1 = document.getElementById(Id);<br/> if (!o1) return;<br/> var l0 = o.offsetLeft;<br/> var t0 = o.offsetTop;<br/> var l = o1.offsetLeft;<br/> var t = o1.offsetTop; <br/> MyMove.Move_e(Id, l0 , t0, l, t,T);<br/> document.body.removeChild(o);<br/> o = null;<br/> } <br/>}<br/><br/>this.Move_e = function(Id, l0 , t0, l, t,T)<br/> {<br/> if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);<br/> var o = document.getElementById(Id);<br/> if (!o) return;<br/> var sl = st = 8;<br/> var s_l = Math.abs(l0 - l);<br/> var s_t = Math.abs(t0 - t);<br/> if (s_l - s_t > 0)<br/> if (s_t)<br/> sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;<br/> else<br/> sl = 0;<br/> else<br/> if (s_l)<br/> st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;<br/> else<br/> st = 0;<br/> if (l0 - l < 0) sl *= -1;<br/> if (t0 - t < 0) st *= -1;<br/> if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;<br/> if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;<br/> if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;<br/> if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;<br/> if (s_l == 0 && s_t == 0) return;<br/> if(T)<br/> {<br/> o.style.left = l0 +"px";<br/> o.style.top = t0 +"px";<br/> return;<br/> }<br/> else<br/> {<br/> if (Math.abs(l + sl - l0) < 2)<br/> o.style.left = l0 +"px";<br/> else<br/> o.style.left = l + sl +"px";<br/> if (Math.abs(t + st - t0) < 2) <br/> o.style.top = t0 +"px";<br/> else<br/> o.style.top = t + st +"px"; <br/> window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +","+T+")", 1);<br/> }<br/> }<br/><br/><br/>}<br/>var MyMove = new Tong_MoveDiv(); <br/><br/>

我在这里也把这个很好很强大的JS函数上传上来,大家一起分享下吧.哈哈

很好的DIV移动FF,IE,很好.rar

　

Tags: javascript  

原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.cn/

本文链接地址：http://www.busfly.cn/post/JS-DIV-move-good-busfly-like.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~