国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 21:37:23
字體:
來源:轉載
供稿:網友
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;"> </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;
});
});

這段代碼對顯示對話框的頭部綁定鼠標監聽事件,當鼠標移動時,整個div也相應的移動!
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 桃源县| 临城县| 怀仁县| 禄劝| 栾川县| 孟津县| 东兴市| 成安县| 道孚县| 木兰县| 开阳县| 曲沃县| 通河县| 龙岩市| 高密市| 赣州市| 建宁县| 鄂州市| 上饶市| 遂昌县| 辽阳县| 基隆市| 耒阳市| 铜山县| 张家界市| 徐汇区| 新乡市| 团风县| 屏山县| 兴和县| 呼伦贝尔市| 潮州市| 霍山县| 肥东县| 仪征市| 峨眉山市| 永新县| 商丘市| 古交市| 桂东县| 婺源县|