UDN-企业互联网技术人气社区

板块导航

浏览  : 644
回复  : 2

[原生js] js拖动div 当鼠标移动时整个div也相应的移动

[复制链接]
牛娜的头像 楼主
发表于 2017-1-8 13:51:12 | 显示全部楼层 |阅读模式
  要拖动的div为最外层的div,这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动,具体的实现如下,感兴趣的朋友可以参考下

  HTML代码如下,其中,要拖动的div为最外层的div
  
  复制代码 代码如下:

  1. <div id="dialog_createUserGroup" class="dialog_main" style="">
  2. <div id="McreateUserGroup">
  3. <div class="title">
  4. <span class="poptitle">新建用户组</span>
  5. <span class="dialog_close" title="关闭" onClick="closeUserGroup();">
  6. <img src='/images/close.png' alt='close' class='user_img' title='关闭'/>
  7. </span>
  8. </div>
  9. <!--新建联系人-->
  10. <div class="popContent">
  11. <span class="localinfo" style="padding:10px 10px 0 46px;">组名称</span>
  12. <input type="text" id="userGroupName" name="userGroupName" class="input_info" value="" style="width:265px;">
  13. <img src='/images/ok.png' alt='ok' class='user_img' title='ok' style="display: none;" id="email_ok"/>
  14. <br>
  15. <span id="userGroupName_info" style="margin-left: 100px; color: red;"> </span>
  16. <br/>
  17. <span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用   户</span>
  18. <div style="padding-top: 20px;width:265px;display:inline-block">
  19. <input type="text" id="group_username" name="group_username" class="input_info" value="" style="width:280px;">
  20. </div>
  21. <br>
  22. <span id="name_info" style="margin-left: 100px; color: red;"> </span>
  23. <br>
  24. <span class="localinfo" style="padding:10px 10px 0 46px;">描   述</span><br>
  25. <textarea id="userGroup_displayname" class="textarea_comm" rows="5" name="userGroup_displayname" style="width:265px;margin-left: 100px;"></textarea>
  26. <br>
  27. <br>
  28. <br>
  29. <br>
  30. <a href="JavaScript:void(0);" id="save_contact_btn" class="dialog_btn2" onclick="saveUserGroup();" style="margin-right: 260px;">确 定</a>   
  31. <a href="JavaScript:void(0);" class="dialog_btn2" onclick="closeUserGroup();">取 消</a>
  32. </div>
复制代码

  js代码如下,
  
  复制代码 代码如下:

  1. $("#McreateUserGroup").mousedown(function(e){
  2. var flag = true;
  3. e = e||event;
  4. var $dialog_createUserGroup = $("#dialog_createUserGroup");
  5. var LEFT = e.clientX - parseInt($dialog_createUserGroup.css("left")),
  6. TOP = e.clientY - parseInt($dialog_createUserGroup.css("top"));
  7. $(document).mousemove(function (e) {
  8. e = e || event;
  9. if (flag) {
  10. $dialog_createUserGroup.css({
  11. "left": e.clientX - LEFT + "px",
  12. "top": e.clientY - TOP + "px"
  13. });
  14. }
  15. });
  16. $(document).mouseup(function (e) {
  17. flag = false;
  18. });
  19. });
复制代码

  这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动!
发表于 2017-1-8 13:51:44 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“随想“
使用道具 举报

回复

发表于 2017-1-12 10:45:02 来自手机 | 显示全部楼层
前排支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部