js拖动div 当鼠标移动时整个div也相应的移动

前端技术 2023/09/01 JavaScript
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也相应的移动!

本文地址:https://www.stayed.cn/item/1920

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。