js拖动div 当鼠标移动时整个div也相应的移动

 更新时间:2013年11月21日 11:43:48   作者:  
要拖动的div为最外层的div,这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动,具体的实现如下,感兴趣的朋友可以参考下
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;">&nbsp;</span>
<br/>
<span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用&nbsp;&nbsp;&nbsp;户</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;">&nbsp;</span>
<br>
<span class="localinfo" style="padding:10px 10px 0 46px;">描&nbsp;&nbsp;&nbsp;述</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也相应的移动!

相关文章

  • 浅谈JS读取DOM对象(标签)的自定义属性

    浅谈JS读取DOM对象(标签)的自定义属性

    下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS实现横向轮播图(初级版)

    JS实现横向轮播图(初级版)

    这篇文章主要为大家详细介绍了JS实现横向轮播图的初级版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS绑定事件的3种方法举例示范(简单易懂)

    JS绑定事件的3种方法举例示范(简单易懂)

    在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如事件绑定、事件监听、事件委托(事件代理)等,这篇文章主要给大家介绍了关于JS绑定事件的3种方法,需要的朋友可以参考下
    2023-11-11
  • 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

    扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

    这篇文章主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下
    2017-02-02
  • JavaScript实现图片局部放大镜交互功能

    JavaScript实现图片局部放大镜交互功能

    在网页设计和开发中,图片局部放大镜交互功能是一个常见的需求,它可以增强用户体验,让用户更仔细地查看图片的细节,本文将介绍如何使用JavaScript来实现这一功能,以及提供代码示例和详细解释,需要的朋友可以参考下
    2023-10-10
  • 如何利用JS将手机号中间四位变成*号

    如何利用JS将手机号中间四位变成*号

    这篇文章主要介绍了如何利用JS将手机号中间四位变成*号,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 微信小程序如何实现精确的日期时间选择器

    微信小程序如何实现精确的日期时间选择器

    这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • Ionic3 UI组件之autocomplete详解

    Ionic3 UI组件之autocomplete详解

    这篇文章主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 怎样用Javascript实现策略模式

    怎样用Javascript实现策略模式

    这篇文章主要介绍了JavaScript设计模式之策略模式,想学习设计模式的同学,一定要看一下
    2021-04-04
  • JavaScript分水岭CommonJS对比ES模块分析

    JavaScript分水岭CommonJS对比ES模块分析

    这篇文章主要为大家介绍了JavaScript分水岭CommonJS对比ES模块分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11

最新评论