关于div窗口的拖动问题

        在div窗口的拖动当中，鼠标的三个动作是重点：mousedown，mousemove, mouseup：鼠标点击，移动，放开；

然后设置拖拽区域，举个例子：

       <div id="xingZQYTree1" class="pop1"
            style="display: none;">
            <div id="pop_title" class="pop_title1"
                 title=''>
                <div class="pop_title_left1" style="font-size: 20px">
                    &nbsp;&nbsp;添加联系人

              <div class="win_ctrls1">
                    <div class="win_ctrls_wrap">
                        <a href="javascript: void(0);" id="se_min" class="win_ctrl win_ctrl_min" duty="win_ctrl1" duty-action="min" duty-data="chat"></a>
                        <a href="javascript: void(0);" id="se_close" class="win_ctrl win_ctrl_close" duty="win_ctrl1" duty-action="close" duty-data="chat"></a>
                         
                    </div>

                </div>

                <div class="pop_title_right1">
                     <!-- <label title="关闭此窗口" onclick="xingZQYTree.style.display='none';">
                        &nbsp;X&nbsp;
                    </label> -->

                </div>
            </div>
            </div>

<!-- 此独立div表示添加联系人 -->
<div class="input_select">
     <form >
<div class="input_con" id="input_number">
             好友号码
            <input id="contanct_num" class="txt1" Width="80px" type="text" value=""/>   
            </div>


 <div class="input_con" id="input_contanct">
             备注姓名
            <input id="contanct_name" class="txt1" Width="80px" type="text" value=""/>   
            </div>

            <div class="select_gr" id="select_group">
                       好友分组
<select name="cars" class="select_g" id="select_option">
<option>家人</option>
<option>朋友</option>
<option>同学</option>
<option>同事</option>
</select>
            </div>
    </div>        
<div>
     <input id="yes" class="Yes"  type="button" value="确定"/>
     <input id="no" class="No"  type="button" value="取消"/>
</div>
</form>
</div>
</div>

可以设置拖拽区域为：id=pop_title这个div,对应的是整个div：id=xingZQYTree1窗口，具体算法如下：

var ff;

$("#pop_title").mousedown(function(e){
   ff=document.getElementById("xingZQYTree1"); //获取对象div
   IMUI.mousedownEvent(e,ff);
  });

  $("#pop_title").mousemove(function(e){
        IMUI.mousemoveEvent(e,ff)
  });

  $("#pop_title").mouseup(function(){
     IMUI.mouseupEvent();
  });

 

 var z,m,n,l,t;

   

    window.IMUI = {
        mousedownEvent:function(e,ff){
            m=e.clientX; //鼠标按下时获取x轴坐标
      n=e.clientY;
   
     l=ff.offsetLeft; //获取div的左位移
     r=ff.offsetRight;
     t=ff.offsetTop;  //获取div的右位移
     b=ff.offsetBottom;
      z=true;   //为变量赋值
        },
   mousemoveEvent:function(e,ff){
     var x=e.clientX; //鼠标移动时获取x轴坐标
   var y=e.clientY; //鼠标移动时获取y轴坐标
   if (z==true)  //当鼠标按下并移动时执行
   {
    ff.style.left=l+(x-m)+"px";//将移动后的坐标赋给相应的位移
    ff.style.right=l+(m-x)+"px";
    ff.style.top=t+(y-n)+"px";
     ff.style.bottom=t-(y-n)+"px";
   }
},
 
 mouseupEvent:function(){
    z=false;
 },

 

}

 

即可形成一个可拖拽的div窗口，东西比较粗糙，不过效果可行