jQuery实现的简单对话框拖动功能示例


Posted in jQuery onJune 05, 2018

本文实例讲述了jQuery实现的简单对话框拖动功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3water.com jquery 拖动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel=" rel="external nofollow" stylesheet">
<style>
  *{margin: 0;padding: 0;box-sizing: border-box;-moz-user-select:none;}
  body {font: 12px/16px bold 'microsoft yahei,微软雅黑';}
  .dragContainer {
    width: 382px;
    height: 395px;
     position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    margin-left: -191px;
    margin-top: -197.5px;
  }
  .dragContainer .dragtitle {
   width: 100%;
   height: 35px;
   border-bottom: 1px solid red;
   text-align: center;
   line-height: 35px;
  }
  .dragContainer .dragtitle:hover {
    cursor: move;
  }
  .dragContainer .content {
    width: 100%;
    height: 360px;
  }
  p.buttonGroup {
     width: 100%;
    text-align: center;
     position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    border-top: 1px solid red;
  }
  p.buttonGroup input {
    padding: 5px 10px;
    color: white;
  }
  p.buttonGroup input:hover {
    cursor: pointer;
    cursor: hand;
  }
  p.buttonGroup input:first-child {
    margin-left: 25px;
    background: blue;
  }
  p.buttonGroup input.btn2 {
    margin-left: 15px;
    background: red;
  }
  </style>
</head>
<body>
 <div class="dragContainer" id="drag" style="'position:absolute;" >
   <p class="dragtitle">标题栏</p>
   <div class="content"></div>
   <p class="buttonGroup"><input type="button" value="确定"><input type="button" value="取消" class="btn2"></p>
 </div>
  <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
  <script type="text/javascript">
  var mydrag={
    mousePoint: {x:0,y:0}, //初始化坐标
    drag: function(){
      var that=this; //保存当前对象即(mydrag),如果不保存,在mousedown()里访问不了mydrag这个对象
      var targetid=$(".dragtitle");
      targetid.mousedown(function(event){
        var e=event;
        var offsetLeft=targetid.offset().left; //当前div的左偏移距离
        var offsetTop=targetid.offset().top;  //当前div的顶部偏移距离
          that.mousePoint.x=e.clientX-offsetLeft;//计算鼠标点击时离它自己div的横向距离
        that.mousePoint.y=e.clientY-offsetTop;  //计算鼠标点击时离它自己div的纵向距离
        $(document).bind('mousemove',move);
        e.stopPropagation();
      });
      function move(event){
          var e =event;
          var Left=e.clientX-that.mousePoint.x; //移动后,重新计算左偏移和顶部偏移距离
          var Top=e.clientY-that.mousePoint.y;
          $("#drag").css({'top':Top,'left':Left,'margin':0});
          $(document).bind('mouseup',end);
          e.stopPropagation();
        };
        function end(event){
          var e = event;
             $(document).unbind('mousemove', move);
                $(document).unbind('mouseup',end);
          e.stopPropagation();
        };
    }
  }
  mydrag.drag();
  </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试,运行效果如下:

jQuery实现的简单对话框拖动功能示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
You might like
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP加密解密类实例分析
2015/04/20 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python生成器表达式和列表解析
2016/03/10 Python
Django入门使用示例
2017/12/12 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
国际贸易个人求职信范文
2014/01/04 职场文书
打架检讨书300字
2014/02/02 职场文书
聘用意向书范本
2014/04/01 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
社区志愿者活动方案
2014/08/18 职场文书
党支部三会一课计划
2014/09/24 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
满月酒邀请函
2015/01/30 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
入党申请书怎么写?
2019/06/21 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python