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连接access数据库的方法
Nov 17 Javascript
Prototype Object对象 学习
Jul 12 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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 SQLite类
2009/05/07 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php压缩文件夹最新版
2018/07/18 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
js实现常用排序算法
2016/08/09 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
python文件和目录操作函数小结
2014/07/11 Python
用Python实现数据的透视表的方法
2018/11/16 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
迁徙的鸟观后感
2015/06/09 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python