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 相关文章推荐
jQuery提交多个表单的小技巧
Jul 27 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python计算信息熵实例
2020/06/18 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
开业庆典答谢词
2014/01/18 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
复试通知单模板
2015/04/24 职场文书
python中的None与NULL用法说明
2021/05/25 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers