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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 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/06/09 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
php中数组最简单的使用方法
2020/12/27 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
用python做游戏的细节详解
2019/06/25 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
信息管理员岗位职责
2013/12/01 职场文书
租赁协议书范本
2014/04/22 职场文书
五一促销活动总结
2014/07/01 职场文书
颐和园导游词
2015/01/30 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
简述Java中throw-throws异常抛出
2021/08/07 Java/Android