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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现购物车全功能
Jan 11 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存储过程调用实例代码
2013/02/03 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP实现图片压缩
2020/09/09 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
原生JS实现天气预报
2020/06/16 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Python实现的矩阵类实例
2017/08/22 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
成人毕业生自我鉴定
2013/10/18 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
安全责任书怎么写
2014/07/28 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
总经理助理岗位职责
2015/01/31 职场文书
董事长致辞
2015/07/29 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书