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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
浅说js变量
May 25 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
react build 后打包发布总结
Aug 24 Javascript
小程序自定义弹框效果
Nov 16 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 应用程序安全防范技术研究
2009/09/25 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
Python中join和split用法实例
2015/04/14 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python reduce函数作用及实例解析
2020/05/08 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
先进事迹报告会感言
2014/01/24 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
大学班长竞选稿
2015/11/20 职场文书
高中物理教学反思
2016/02/19 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python