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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
HTTP状态代码以及定义(解释)
Feb 02 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
element中table高度自适应的实现
Oct 21 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代码
2013/12/03 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Django发送html邮件的方法
2015/05/26 Python
用matplotlib画等高线图详解
2017/12/14 Python
python反编译学习之字节码详解
2019/05/19 Python
python实现tail -f 功能
2020/01/17 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
详解Python多线程下的list
2020/07/03 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
网络研修随笔感言
2014/02/17 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
学校政风行风整改方案
2014/10/25 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
学习十八大的感悟
2015/08/11 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL