HTML代码如下，其中，要拖动的div为最外层的div
复制代码 代码如下:
<div id="dialog_createUserGroup">
<div id="McreateUserGroup">
<div>
<span>新建用户组</span>
<span title="关闭">
<img src='http://www.jb51.netimages/close.png' alt='close' title='关闭'/>
</span>
</div>
<>
<div>
<span>组名称</span>
<input type="text" id="userGroupName" name="userGroupName" value="">
<img src='http://www.jb51.netimages/ok.png' alt='ok' title='ok' id="email_ok"/>
<br>
<span id="userGroupName_info"></span>
<br/>
<span>用户</span>
<div>
<input type="text" id="group_username" name="group_username" value="">
</div>
<br>
<span id="name_info"></span>
<br>
<span>描述</span><br>
<textarea id="userGroup_displayname" rows="5" name="userGroup_displayname"></textarea>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);" id="save_contact_btn">确定</a>
<a href="javascript:void(0);">取消</a>
</div>
js代码如下,
复制代码 代码如下:
$("#McreateUserGroup").mousedown(function(e){
var flag = true;
e = e||event;
var $dialog_createUserGroup = $("#dialog_createUserGroup");
var LEFT = e.clientX - parseInt($dialog_createUserGroup.css("left")),
TOP = e.clientY - parseInt($dialog_createUserGroup.css("top"));
$(document).mousemove(function (e) {
e = e || event;
if (flag) {
$dialog_createUserGroup.css({
"left": e.clientX - LEFT + "px",
"top": e.clientY - TOP + "px"
});
}
});
$(document).mouseup(function (e) {
flag = false;
});
});
这段代码对显示对话框的头部绑定鼠标监听事件，当鼠标移动时，整个div也相应的移动！
【js拖动div 当鼠标移动时整个div也相应的移动】相关文章：