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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
深入理解php的MySQL连接类
2013/06/07 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python中ConfigParse模块的用法
2014/09/29 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python 登录网站详解及实例
2017/04/11 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
植树造林的宣传标语
2014/06/23 职场文书
陪护人员误工证明
2015/06/24 职场文书
运动员加油词
2015/07/18 职场文书
婚礼答谢词范文
2015/09/29 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
女性励志书籍推荐
2019/08/19 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
导游词之昭君岛
2020/01/17 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android