js拖動div 當鼠標移動時整個div也相應(yīng)的移動
更新時間:2013年11月21日 11:43:48 作者:
要拖動的div為最外層的div,這段代碼對顯示對話框的頭部綁定鼠標監(jiān)聽事件,當鼠標移動時,整個div也相應(yīng)的移動,具體的實現(xiàn)如下,感興趣的朋友可以參考下
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="關(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;
});
});
這段代碼對顯示對話框的頭部綁定鼠標監(jiān)聽事件,當鼠標移動時,整個div也相應(yīng)的移動!
復制代碼 代碼如下:
<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;
});
});
這段代碼對顯示對話框的頭部綁定鼠標監(jiān)聽事件,當鼠標移動時,整個div也相應(yīng)的移動!
您可能感興趣的文章:
相關(guān)文章
javascript ready和load事件的區(qū)別示例介紹
ready是在DOM加載完成就觸發(fā);load是在加載完所有頁面內(nèi)容才會觸發(fā),下為大家簡要介紹下,不知道的朋友可以參考下2013-08-08Javascript動態(tài)創(chuàng)建div的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建div的方法,是javascript節(jié)點操作的典型應(yīng)用,非常具有實用價值,需要的朋友可以參考下2015-02-02javascript獲取指定區(qū)間范圍隨機數(shù)的方法
下面小編就為大家?guī)硪黄猨avascript獲取指定區(qū)間范圍隨機數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09JS實現(xiàn)的另類手風琴效果網(wǎng)頁內(nèi)容切換代碼
這篇文章主要介紹了JS實現(xiàn)的另類手風琴效果網(wǎng)頁內(nèi)容切換代碼,通過JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素樣式屬性實現(xiàn)手風琴效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09js如何查找json數(shù)據(jù)中的最大值和最小值方法
這篇文章主要介紹了js如何查找json數(shù)據(jù)中的最大值和最小值方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04