js拖动div 当鼠标移动时整个div也相应的移动
发布时间:2024-04-22 22:17:20
标签:js拖动div,鼠标移动,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;"> </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也相应的移动!
0
投稿
猜你喜欢
- 解决golang编译提示dial tcp 172.217.160.113:443: connectex: A connection atte
- 实现思路很多网站都有拼图验证码1.首先要了解拼图验证码的生成原理2.制定破解计划,考虑其可能性和成功率。3.编写脚本很多网站的拼图验证码都是
- 使用 Windows 系统一大好处是它的应用太丰富了,甚至强大的 GPU 也能在闲暇时间做点其它「工作」。然而与 Linux 或 macOS
- 今天主要记录一下pandas去重复行以及如何分类汇总。以下面的数据帧作为一个例子: import pandas as pddata
- 同C语言、Java一样,Python中也存在条件选择和循环语句,其风格和C语言、java的很类似,但是在写法和用法上还是有一些区别。今天就让
- 本文实例讲述了Python + Requests + Unittest接口自动化测试。分享给大家供大家参考,具体如下:1. 介绍下pytho
- 问题描述像这样的图,我想把右边的colorbar设置成和主图一样高度方法0. plt.colorbar参数介绍https://matplot
- 最近真的感觉到了python生态的强大(倒吸一口凉气)现在介绍一个可以生成动态二维码的库(myqr)效果如图:第一步要安装myqr库在cmd
- 问题你需要将一个Python对象序列化为一个字节流,以便将它保存到一个文件、存储到数据库或者通过网络传输它。解决方案对于序列化最普遍的做法就
- 本文实例讲述了python递归计算N!的方法。分享给大家供大家参考。具体实现方法如下:def factorial(n): if
- 近期线上出现一个bug,研发的小伙伴把测试环境的地址写死到代码中,在上线前忘记修改,导致线上发布的代码中使用了测试环境地址。开发过程中虽然有
- 简述在大多数此类教程中都会不遗余力的介绍如何使用数据库。今天我们对数据库暂且不表,而是来关注另一个在web应用中很重要的特性:如
- 数据加载分为加载torchvision.datasets中的数据集以及加载自己使用的数据集两种情况。torchvision.datasets
- 前言Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外
- 背景: 由于工作需要,现在有这么一个需求,要合并大量的word文档,而且要在不同的目录
- 1、前言函数也是一个对象,从而可以增加属性,使用句点来表示属性。如果内部函数的定义包含了在外部函数中定义的对象的引用(外部对象可以是在外部函
- 多表查询案列说明笛卡尔积的理解select id,department_namefrom employees,departments;#错的
- 无法覆盖vant的UI组件的样式有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修
- WGAN与GAN的不同去除sigmoid使用具有动量的优化方法,比如使用RMSProp要对Discriminator的权重做修整限制以确保l
- Python中的中文是个很头痛的问题,Python2和Python3都会出现,而且py2中出现的概率要大些。 有一道面试题: Py