关于div窗口的拖动问题

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

然后设置拖拽区域,举个例子:

<div id=”xingZQYTree1″
style=”display: none;”>
<div id=”pop_title”
title=”>
<div style=”font-size: 20px”>
&nbsp;&nbsp;添加联系人

<div>
<div>
<a href=”javascript: void(0);” id=”se_min” duty=”win_ctrl1″ duty-action=”min” duty-data=”chat”></a>
<a href=”javascript: void(0);” id=”se_close” duty=”win_ctrl1″ duty-action=”close” duty-data=”chat”></a>

</div>

</div>

<div>
<!– <label title=”关闭此窗口” onclick=”xingZQYTree.style.display=’none’;”>
&nbsp;X&nbsp;
</label> –>

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

<!– 此独立div表示添加联系人 –>
<div>
<form >
<div id=”input_number”>
好友号码
<input id=”contanct_num” Width=”80px” type=”text” value=””/>
</div>

<div id=”input_contanct”>
备注姓名
<input id=”contanct_name” Width=”80px” type=”text” value=””/>
</div>

<div id=”select_group”>
好友分组
<select name=”cars” id=”select_option”>
<option>家人</option>
<option>朋友</option>
<option>同学</option>
<option>同事</option>
</select>
</div>
</div>
<div>
<input id=”yes”  type=”button” value=”确定”/>
<input id=”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窗口,东西比较粗糙,不过效果可行

标签