jQuery窗口拖动功能的实现代码


Posted in Javascript onFebruary 04, 2017

jQuery窗口拖动功能的实现代码

具体代码如下所示:

$("#showTitle").mousedown(function (e) {
    vbool = true;
    vHeight = e.pageY;
    vWidth = e.pageX;
    cHeight = vHeight - $("#show").offset().top;
    cWdith = vWidth - $("#show").offset().left;
    //alert("divshow" + $("#show").offset().top + " divvHeight" + vHeight);
    //alert("高" + cHeight + " 宽" + cWdith);
  })
  $(document).mouseup(function () {
    vbool = false;
  })
  var showWidth = $("#show").width();
  var showHeight = $("#show").height();
  var documentWidth = $(document).width();
  var documentHeight = $(document).height();
  $(document).mousemove(function (e) {
    if (vbool) {
      var divheight = e.pageY - cHeight;//窗口要移动到的位置
      var divwidth = e.pageX - cWdith;//窗口要移动到的位置
      $("#la1").text(divheight + "w" + divwidth + "win" + showWidth + " x " + documentWidth + "" + showWidth);
      if (divwidth < 0) {
        divwidth = 0;
      }
      if (divheight < 50) {
        divheight = 50;
      }
      if (divwidth > documentWidth - showWidth) {
        divwidth = documentWidth - showWidth - 5;
      }
      if (divheight > documentHeight - showHeight) {
        divheight = documentHeight - showHeight - 5;
      }
      $("#show").css({ "left": divwidth, "top": divheight });
    }
  })

下面看下jQuery 鼠标拖拽移动窗口的实现代码

拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果"left"属性为数字,直接使用"left"即可。

// 弹窗模块拖拽拖动
$(function(){
  var _move=false;//移动标记
  var _x,_y;//鼠标离控件左上角的相对位置
  var _dragZone = $(".M_boxCenter .M_boxBody > h3");
  var _dragBody = _dragZone.parent();
  _dragZone.mousedown(function(e){
    $(this).attr("onselectstart", "return false"); //禁双击选中
    $("body").css({"-webkit-user-select":"none", "-moz-user-select":"none", "-ms-user-select":"none", "-khtml-user-select":"none", "user-select":"none"}); //禁止选中文字
    _move=true;
    _x=e.pageX-parseInt(_dragBody.css("margin-left"));
    _y=e.pageY-parseInt(_dragBody.css("margin-top"));
    _dragBody.fadeTo(150, 0.5);
  });
  $(document).mousemove(function(e){
    if(_move){
      var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
      var y=e.pageY-_y;
      if(e.pageX <= 0 || e.pageY <= 0){
        _move=false;
      }else {
        _dragBody.css({marginLeft:x, marginTop:y});//控件新位置
      }
    }
  }).mouseup(function(){
    _move=false;
    _dragBody.fadeTo("fast", 1);
    $("body").removeAttr("style"); //移除不能选文字
  });
});

以上所述是小编给大家介绍的jQuery窗口拖动功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
vue-cli安装使用流程步骤详解
Nov 08 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
简单易懂的天气插件(代码分享)
Feb 04 #Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 #Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 #Javascript
javascript实现复选框全选或反选
Feb 04 #Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 #Javascript
javascript表单正则应用
Feb 04 #Javascript
JS中的phototype详解
Feb 04 #Javascript
You might like
php格式化json函数示例代码
2016/05/12 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python实现网站的模拟登录
2016/01/04 Python
python实现烟花小程序
2019/01/30 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
python处理document文档保留原样式
2019/09/23 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
简单租房协议书范本
2014/08/20 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
情人节单身感言
2015/08/03 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python