要拖動(dòng)的div為最外層的div，這段代碼對(duì)顯示對(duì)話框的頭部綁定鼠標(biāo)監(jiān)聽事件，當(dāng)鼠標(biāo)移動(dòng)時(shí)，整個(gè)div也相應(yīng)的移動(dòng)，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下

HTML代碼如下，其中，要拖動(dòng)的div為最外層的div

復(fù)制代碼代碼如下:

 
<div id="dialog_createUserGroup" class="dialog_main" style=""> 
<div id="McreateUserGroup"> 
<div class="title"> 
<span class="poptitle">新建用戶組</span> 
<span class="dialog_close" title="關(guān)閉" onClick="closeUserGroup();"> 
<img src='/images/close.png' alt='close' class='user_img' title='關(guān)閉'/> 
</span> 
</div> 
<!--新建聯(lián)系人--> 
<div class="popContent"> 
<span class="localinfo" style="padding:10px 10px 0 46px;">組名稱</span> 
<input type="text" id="userGroupName" name="userGroupName" class="input_info" value="" style="width:265px;"> 
<img src='/images/ok.png' alt='ok' class='user_img' title='ok' style="display: none;" id="email_ok"/> 
<br> 
<span id="userGroupName_info" style="margin-left: 100px; color: red;">&nbsp;</span> 
<br/> 
<span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用&nbsp;&nbsp;&nbsp;戶</span> 
<div style="padding-top: 20px;width:265px;display:inline-block"> 
<input type="text" id="group_username" name="group_username" class="input_info" value="" style="width:280px;"> 
</div> 
<br> 
<span id="name_info" style="margin-left: 100px; color: red;">&nbsp;</span> 
<br> 
<span class="localinfo" style="padding:10px 10px 0 46px;">描&nbsp;&nbsp;&nbsp;述</span><br> 
<textarea id="userGroup_displayname" class="textarea_comm" rows="5" name="userGroup_displayname" style="width:265px;margin-left: 100px;"></textarea> 
<br> 
<br> 
<br> 
<br> 
<a href="javascript:void(0);" id="save_contact_btn" class="dialog_btn2" onclick="saveUserGroup();" style="margin-right: 260px;">確　定</a>　　　 
<a href="javascript:void(0);" class="dialog_btn2" onclick="closeUserGroup();">取　消</a> 
</div> 

js代碼如下,

復(fù)制代碼代碼如下:

 
$("#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; 
}); 
}); 