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实现当滑动到一定位置时固定效果
Jun 17 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
PHP字符串的连接的简单实例
2013/12/30 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python Trie树实现字典排序
2014/03/28 Python
简单讲解Python中的闭包
2015/08/11 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python zip函数打包元素实例解析
2019/12/11 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
python ETL工具 pyetl
2020/06/07 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
实习单位鉴定意见
2015/06/04 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android