拖动DIV，兼容IE6-9,兼容遨游火狐等

本文链接：https://blog.csdn.net/99guo/article/details/6618815

下面是通用的移动DIV的javascript，
<script type="text/javascript">

var b_down ;
b_down = false; //可拖动标志
var mymovediv; //要移动的DIV的ID
var docleft;
var doctop;

//主调用函数

function movediv(div_id)
{

dragdown(div_id);
}

//拖动开始
function dragdown(move_id)
{

  mymovediv = document.getElementById(move_id);
  //mymovediv.style.zIndex = 1000;
   //mymovediv.setCapture() ;

  doctop = event.clientY - parseInt(mymovediv.offsetTop);
  docleft = event.clientX - parseInt(mymovediv.offsetLeft);
  b_down = !b_down ;

}

//拖动

function moveit()
{

//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if((b_down) && (mymovediv!=null) ){
   with(mymovediv.style){
   left = (event.clientX - docleft) + "px"
   top = (event.clientY - doctop) + "px";
   }

   }

}

//拖动结束
function dragclose()
{
// mymovediv.releaseCapture(); //释放当前对象的鼠标捕捉
   b_down = false;
mymovediv = null;

}

document.onmouseup =function()
   {
   dragclose();
   }
document.onmousemove =function()
   {
   moveit();

}
</script>

---------------------------------------------------------------------------调用方式--------------------------------------------
<div id="Panel_sel" runat="server"
   style="width:480px;display:none; position:absolute;left:100px;top:100px; z-index:200; " >
   <div style="width:480px; height:35px; background-image: url('../../../image/bg_center.jpg'); line-height:35px; cursor:move; text-align:center; "
   οnmοusedοwn='movediv("Panel_sel")' > <span style="color:Blue;font-weight:bold;" >选择用户</span>
   </div>
   <div id="divcontent" style=" background-color:Maroon;width:480px;height:210px;" >

   <iframe id="iframe_seluser" src="../../../Server/selUser.aspx" scrolling="no" style="width:480px;height:210px;" ></iframe>
   </div>
   <div style="width:480px;height:35px; background-image: url('../../../image/bg_center.jpg'); line-height:35px; " >
   <table width="100%" >
   <tr>
   <td align="center" valign="middle" >
   <input type="button" value="确定" style="width: 59px" />
 <input type="button" value="取消" style="width: 59px" />
   </td>
   </tr>
   </table>
   </div>
   </div>

---------------------------------------------------------------------------------------------------------------------------------------
在拖动DIV时，当DIV中包含大量数据时，用户拖动DIV时会出现慢、延时等现象。
解决方法，把含有大量数据的DIV隐藏后在拖动。改边后的SCRIPT如下:
<script type="text/javascript">
var b_down ;
b_down = false; //可拖动标志
var mymovediv; //要移动的DIV的ID
var mycontdiv_id; //可不用
var docleft;
var doctop;

var Div_innerHTML;

function movediv(div_id, contdiv_id) {
   if (contdiv_id) {
   mycontdiv_id = contdiv_id;
   }
   else {
   mycontdiv_id = "";
   }
   dragdown(div_id);

}

function dragdown(move_id)
{

  //mymovediv.style.zIndex = 1000
   //mymovediv.setCapture() ;


  if (document.getElementById(mycontdiv_id)) {
   document.getElementById(mycontdiv_id).style.display = "none";
  }
  mymovediv = document.getElementById(move_id);
  doctop = event.clientY - parseInt(mymovediv.offsetTop);
  docleft = event.clientX - parseInt(mymovediv.offsetLeft);
  b_down = !b_down ;

}

function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if((b_down) && (mymovediv!=null) ){
   with(mymovediv.style){
   left = (event.clientX - docleft) + "px"
   top = (event.clientY - doctop) + "px";
   }

   }

}

function dragclose()
{
// mymovediv.releaseCapture(); //释放当前对象的鼠标捕捉
   b_down = false;
   if (mycontdiv_id && mycontdiv_id != "") {
   document.getElementById(mycontdiv_id).style.display = "" ;
   }
mymovediv = null;

}

document.onmouseup =function()
   {
   dragclose();
   }
document.onmousemove =function()
   {
   moveit();
   }
</script>