js拖動(dòng)div 當(dāng)鼠標(biāo)移動(dòng)時(shí)整個(gè)div也相應(yīng)的移動(dòng)
更新時(shí)間:2013年11月21日 11:43:48 作者:
要拖動(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
<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;"> </span>
<br/>
<span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用 戶</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;"> </span>
<br>
<span class="localinfo" style="padding:10px 10px 0 46px;">描 述</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;
});
});
這段代碼對(duì)顯示對(duì)話框的頭部綁定鼠標(biāo)監(jiān)聽事件,當(dāng)鼠標(biāo)移動(dòng)時(shí),整個(gè)div也相應(yīng)的移動(dòng)!
復(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;"> </span>
<br/>
<span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用 戶</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;"> </span>
<br>
<span class="localinfo" style="padding:10px 10px 0 46px;">描 述</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;
});
});
這段代碼對(duì)顯示對(duì)話框的頭部綁定鼠標(biāo)監(jiān)聽事件,當(dāng)鼠標(biāo)移動(dòng)時(shí),整個(gè)div也相應(yīng)的移動(dòng)!
您可能感興趣的文章:
- js實(shí)現(xiàn)鍵盤控制DIV移動(dòng)的方法
- js+html+css實(shí)現(xiàn)鼠標(biāo)移動(dòng)div實(shí)例
- 利用javascript移動(dòng)div層-javascript 拖動(dòng)層
- javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
- JavaScript與Div對(duì)層定位和移動(dòng)獲得坐標(biāo)的實(shí)現(xiàn)代碼
- JS onmousemove鼠標(biāo)移動(dòng)坐標(biāo)接龍DIV效果實(shí)例
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面 移動(dòng)DIV
- js實(shí)現(xiàn)鍵盤操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
- JavaScript利用鍵盤碼控制div移動(dòng)
相關(guān)文章
淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性
下面小編就為大家?guī)硪黄獪\談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框
這篇文章主要介紹了擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框,需要的朋友可以參考下2017-02-02
JavaScript實(shí)現(xiàn)圖片局部放大鏡交互功能
在網(wǎng)頁設(shè)計(jì)和開發(fā)中,圖片局部放大鏡交互功能是一個(gè)常見的需求,它可以增強(qiáng)用戶體驗(yàn),讓用戶更仔細(xì)地查看圖片的細(xì)節(jié),本文將介紹如何使用JavaScript來實(shí)現(xiàn)這一功能,以及提供代碼示例和詳細(xì)解釋,需要的朋友可以參考下2023-10-10
如何利用JS將手機(jī)號(hào)中間四位變成*號(hào)
這篇文章主要介紹了如何利用JS將手機(jī)號(hào)中間四位變成*號(hào),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
微信小程序如何實(shí)現(xiàn)精確的日期時(shí)間選擇器
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)精確的日期時(shí)間選擇器,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
Ionic3 UI組件之a(chǎn)utocomplete詳解
這篇文章主要為大家詳細(xì)介紹了Ionic3 UI組件之a(chǎn)utocomplete的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
怎樣用Javascript實(shí)現(xiàn)策略模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之策略模式,想學(xué)習(xí)設(shè)計(jì)模式的同學(xué),一定要看一下2021-04-04
JavaScript分水嶺CommonJS對(duì)比ES模塊分析
這篇文章主要為大家介紹了JavaScript分水嶺CommonJS對(duì)比ES模塊分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11

