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也相应的移动！