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中的Split使用方法与技巧
Mar 09 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
js面向对象方式实现拖拽效果
Mar 03 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 什么是PEAR?(第二篇)
2009/03/19 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php两种无限分类方法实例
2015/04/21 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
js实现日历
2020/11/07 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python实现的批量下载RFC文档
2015/03/10 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python机器人运动范围问题的解答
2019/04/29 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
中科创达面试题
2016/12/28 面试题
物流仓储计划书
2014/01/10 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
初中班主任评语
2014/04/24 职场文书
2014年征兵标语
2014/06/20 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
单位介绍信格式范文
2015/05/04 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
零基础学java之循环语句的使用
2022/04/10 Java/Android
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL