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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
详解jquery选择器的原理
Aug 01 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
浅谈python迭代器
2017/11/08 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
django连接oracle时setting 配置方法
2019/08/29 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
高中政治教学反思
2014/01/18 职场文书
工程承包协议书
2014/04/22 职场文书
受伤赔偿协议书
2014/09/24 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
java executor包参数处理功能 
2022/02/15 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js