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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
PHP7下协程的实现方法详解
2017/12/17 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
写好自荐信的技巧
2013/11/08 职场文书
商场中秋节活动方案
2014/02/07 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
收入证明申请书
2015/06/12 职场文书
家属联谊会致辞
2015/07/31 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python