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


Posted in Javascript onNovember 21, 2013

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也相应的移动!
Javascript 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
js获取对象为null的解决方法
Nov 21 #Javascript
tangram框架响应式加载图片方法
Nov 21 #Javascript
使图片旋转的3种解决方案
Nov 21 #Javascript
js单例模式详解实例
Nov 21 #Javascript
Ajax同步与异步传输的示例代码
Nov 21 #Javascript
jquery与prototype框架的详细对比
Nov 21 #Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
获取body标签的两种方法
2011/10/13 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python退火算法在高次方程的应用
2018/07/26 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
Weblogic的布署方式
2013/08/23 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
教师一岗双责责任书
2014/04/16 职场文书
教师个人发展总结
2015/02/11 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python