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 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
详解react-redux插件入门
Apr 19 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
详解jQuery如何实现模糊搜索
May 10 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
基于PHP文件操作的详细诠释
2013/06/21 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php远程下载类分享
2016/04/13 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python ljust rjust center输出
2008/09/06 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
解决python3输入的坑——input()
2020/12/05 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
邀请函的格式
2015/01/30 职场文书
布达拉宫导游词
2015/02/02 职场文书
检察院起诉意见书
2015/05/20 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
篮球拉拉队口号
2015/12/25 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers