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

 更新时间:2017年02月04日 11:11:00   投稿:mrr  
本文通过jquery代码实现窗口拖动功能以及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窗口拖动功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jQuery插件ajaxFileUpload使用详解

    jQuery插件ajaxFileUpload使用详解

    这篇文章主要为大家详细介绍了jQuery插件ajaxFileUpload使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JQuery常用选择器功能与用法实例分析

    JQuery常用选择器功能与用法实例分析

    这篇文章主要介绍了JQuery常用选择器功能与用法,结合实例形式分析了jquery常见选择器基本功能、使用方法及操作注意事项,需要的朋友可以参考下
    2019-12-12
  • 基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    jquery-slider幻灯片插件通过json数据来提供图片地址和描述信息,同时也可以更换json数据来动态切换不同的图片,对json数据jquery幻灯片插件相关知识感兴趣的朋友一起学习吧
    2016-08-08
  • 基于jquery的监控数据是否发生改变

    基于jquery的监控数据是否发生改变

    在实际开发中经常会遇到数据没发生改变是,由于用户不小心点击保存,这样导致数据库的日志增大;还有数据填写好后,忘了添加保存直接关闭页面离开。
    2011-04-04
  • jquery submit ie6下失效的原因分析及解决方法

    jquery submit ie6下失效的原因分析及解决方法

    jquery submit ie6下失效的原因分析及解决方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 批量修改标签css样式以input标签为例

    批量修改标签css样式以input标签为例

    本节主要介绍了jquery如何批量修改标签css样式以input标签为例,需要的朋友可以参考下
    2014-07-07
  • 基于Jquery的温度计动画效果

    基于Jquery的温度计动画效果

    将代码一一拷贝到页面相应的位置,然后记得调用jquery框架,展示条件有限,所以效果跟设计图有出入,但实现原理是一样的,欢迎大家多多交流!
    2010-06-06
  • jQuery弹出下拉列表插件(实现kindeditor的@功能)

    jQuery弹出下拉列表插件(实现kindeditor的@功能)

    这篇文章主要介绍了jQuery弹出下拉列表插件(实现kindeditor的@功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • jquery搜索框效果实现方法

    jquery搜索框效果实现方法

    这篇文章主要介绍了jquery搜索框效果实现方法,分析了jquery搜索框效果的实现技巧及注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 初窥JQuery(二) 事件机制(1)

    初窥JQuery(二) 事件机制(1)

    JQuery的事件处理机制在JQuery框架中起着重要的左右,它就像电视机的开关,我们打开电视机的开关才能看到各个电视台精彩的节目,那么我们使用JQuery的事件处理机制就可以创造我们自定义的行为,比如说提交、改变样式、效果显示等等,使我们的网页更加丰富。
    2010-11-11

最新评论