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

时间:2024-04-22 22:17:20 

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;">&nbsp;</span>
<br/>
<span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用&nbsp;&nbsp;&nbsp;户</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;">&nbsp;</span>
<br>
<span class="localinfo" style="padding:10px 10px 0 46px;">描&nbsp;&nbsp;&nbsp;述</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也相应的移动!

标签:js拖动div,鼠标移动,div移动
0
投稿

猜你喜欢

  • Python2中的raw_input() 与 input()

    2022-05-16 07:42:06
  • Mysql中explain作用详解

    2024-01-28 11:40:46
  • 简单实现SQLServer转MYSQL的方法

    2024-01-21 20:12:13
  • 从mysql读写分离着手提升服务器性能

    2024-01-22 06:56:10
  • 利用Python如何实时检测自身内存占用

    2023-01-11 03:12:02
  • python将多个py文件和其他文件打包为exe可执行文件

    2021-07-02 05:36:40
  • django 实现电子支付功能的示例代码

    2022-01-31 01:30:34
  • python Web开发你要理解的WSGI & uwsgi详解

    2021-02-04 08:46:38
  • Django 用户认证组件使用详解

    2021-05-11 12:44:25
  • 科学知识:理解socket

    2022-11-28 09:50:07
  • DIV+CSS常见错误及解决方法

    2008-04-25 22:46:00
  • SQL语句学习

    2024-01-18 15:07:00
  • Python实现的对本地host127.0.0.1主机进行扫描端口功能示例

    2021-05-13 08:43:23
  • Flask 让jsonify返回的json串支持中文显示的方法

    2022-01-23 04:20:31
  • python光学仿真实现光线追迹之空间关系

    2023-10-29 01:48:42
  • 该死的IE,走好

    2009-01-15 12:26:00
  • Python实现AI自动玩俄罗斯方块游戏

    2021-11-16 23:11:41
  • mysql 存储过程的问题

    2024-01-29 09:05:15
  • 全国省市区县最全最新数据表(数据来源谷歌)

    2024-01-12 17:45:55
  • 解读HTML:命名空间与字符编码

    2008-12-10 14:03:00
  • asp之家 网络编程 m.aspxhome.com