js拖動div 當鼠標移動時整個div也相應的移動

更新時間：2013年11月21日 11:43:48 作者：

要拖動的div為最外層的div，這段代碼對顯示對話框的頭部綁定鼠標監(jiān)聽事件，當鼠標移動時，整個div也相應的移動，具體的實現如下，感興趣的朋友可以參考下

HTML代碼如下，其中，要拖動的div為最外層的div

 
<div id="dialog_createUserGroup" class="dialog_main" style=""> 
<div id="McreateUserGroup"> 
<div class="title"> 
<span class="poptitle">新建用戶組</span> 
<span class="dialog_close" title="關閉" onClick="closeUserGroup();"> 
<img src='/images/close.png' alt='close' class='user_img' title='關閉'/> 
</span> 
</div> 
<!--新建聯系人--> 
<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代碼如下,

復制代碼代碼如下:

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

這段代碼對顯示對話框的頭部綁定鼠標監(jiān)聽事件，當鼠標移動時，整個div也相應的移動！

您可能感興趣的文章:

淺談JS讀取DOM對象(標簽)的自定義屬性
下面小編就為大家?guī)硪黄獪\談JS讀取DOM對象(標簽)的自定義屬性。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JS實現橫向輪播圖（初級版）
這篇文章主要為大家詳細介紹了JS實現橫向輪播圖的初級版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
JS綁定事件的3種方法舉例示范(簡單易懂)
在JavaScript的學習中我們經常會遇到JavaScript的事件機制,例如事件綁定、事件監(jiān)聽、事件委托（事件代理）等,這篇文章主要給大家介紹了關于JS綁定事件的3種方法,需要的朋友可以參考下
2023-11-11
擴展bootstrap的modal模態(tài)框-動態(tài)添加modal框-彈出多個modal框
這篇文章主要介紹了擴展bootstrap的modal模態(tài)框-動態(tài)添加modal框-彈出多個modal框,需要的朋友可以參考下
2017-02-02
JavaScript實現圖片局部放大鏡交互功能
在網頁設計和開發(fā)中,圖片局部放大鏡交互功能是一個常見的需求,它可以增強用戶體驗,讓用戶更仔細地查看圖片的細節(jié),本文將介紹如何使用JavaScript來實現這一功能,以及提供代碼示例和詳細解釋,需要的朋友可以參考下
2023-10-10
如何利用JS將手機號中間四位變成*號
這篇文章主要介紹了如何利用JS將手機號中間四位變成*號,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
微信小程序如何實現精確的日期時間選擇器
這篇文章主要介紹了微信小程序如何實現精確的日期時間選擇器,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-01-01
Ionic3 UI組件之autocomplete詳解
這篇文章主要為大家詳細介紹了Ionic3 UI組件之autocomplete的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
怎樣用Javascript實現策略模式
這篇文章主要介紹了JavaScript設計模式之策略模式，想學習設計模式的同學，一定要看一下
2021-04-04
JavaScript分水嶺CommonJS對比ES模塊分析
這篇文章主要為大家介紹了JavaScript分水嶺CommonJS對比ES模塊分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11