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 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
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
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
记录Django开发心得
2014/07/16 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python序列操作之进阶篇
2016/12/08 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
清华大学自主招生自荐信
2014/01/29 职场文书
倡议书格式范文
2014/04/14 职场文书
模特大赛策划方案
2014/05/28 职场文书
2014年共青团工作总结
2014/12/10 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
教师考核鉴定意见
2015/06/05 职场文书
单位更名证明
2015/06/18 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
银行服务理念口号
2015/12/25 职场文书
《小摄影师》教学反思
2016/02/18 职场文书