威尼斯www.9778.com-威尼斯正版官方网站

javascript弹出拖动窗口_javascript技巧_脚本之家

日期:2020-01-03编辑作者:服务器&运维

以上是本文实现javascript弹出拖动窗口的全部内容,希望对大家有所帮助。

您可能感兴趣的文章:

  • javascript div 弹出可拖动窗口
  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
  • javascript实现漂亮的拖动层,窗口拖拽特效
  • JavaScript模拟可展开、拖动与关闭的聊天窗口实例
  • javascript实现可拖动变色并关闭层窗口实例
  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
  • javascript弹出拖动窗口

在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个...

复制代码 代码如下:

   可以拖动的弹出窗口  #popDiv { position:absolute; visibility:hidden; overflow:hidden; border:2px solid #AEBBCA; background-color:#EEF1F8; cursor:move; padding:1px; } #popTitle { background:#9DACBF; height:20px; line-height:20px; padding:1px; } #popForm { padding:2px; } .title_left { font-weight:bold; padding-left:5px; float:left; } .title_right { float:right; } #popTitle .title_right a { color:#000; text-decoration:none; } #popTitle .title_right a:hover { text-decoration:underline; color:#FF0000; }   function showPopup() //弹出层 { var objDiv=document.getElementById; objDiv.style.top="50px";//设置弹出层距离上边界的距离 objDiv.style.left="200px";//设置弹出层距离左边界的距离 objDiv.style.width="300px";//设置弹出层的宽度 objDiv.style.height="200px";//设置弹出层的高度 objDiv.style.visibility="visible"; } function hidePopup()//关闭层 { var objDiv=document.getElementById; objDiv.style.visibility="hidden"; }       修改操作 关闭      var objDiv=document.getElementById; var isIE=document.all?true:false;//判断浏览器类型 document.onmousedown = function//当鼠标左键按下后执行此函数 { var evnt=evnt?evnt:event; if(evnt.button == (document.all ? 1 : 0)) { mouseD = true;//mouseD为鼠标左键状态标志,为true时表示左键被按下 } } objDiv.onmousedown = function { objDrag=this;//objDrag为拖动的对象 var evnt=evnt?evnt:event; if(evnt.button == (document.all?1 : 0)) { mx=evnt.clientX; my=evnt.clientY; objDiv.style.left=objDiv.offsetLeft+"px"; objDiv.style.top=objDiv.offsetTop+"px"; if { objDiv.setCapture(); } else { window.captureEvents; } } } document.onmouseup=function() { mouseD=false; objDrag=""; if { objDiv.releaseCapture(); } else { window.releaseEvents; } } document.onmousemove=function { var evnt=evnt?evnt:event; if(mouseD==true&&objDrag) { var mrx=evnt.clientX-mx; var mry=evnt.clientY-my; objDiv.style.left = parseInt + mrx + "px"; objDiv.style.top = parseInt + mry + "px"; mx = evnt.clientX; my = evnt.clientY; } }   

js仿百度登录页实现拖动窗口效果,js窗口

在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动;那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了;首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下、移动、松开;在这三个事件里分别计算元素鼠标的位置即可;

复制代码

/*******
   拖拽原理1:
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1, 那么
      元素y = 现在鼠标y - 原来鼠标y + 原来元素y
      元素x = 现在鼠标x - 原来鼠标x + 原来元素x
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面这个原理也可以演变为:
/*******
   拖拽原理2:
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
      元素的偏移值X=元素的X-元素的offsetLeft
      元素的偏移值Y=元素的Y-元素的offsetTop
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1, 那么
      元素y = 现在鼠标y -元素的偏移值X
      元素x = 现在鼠标x -元素的偏移值Y
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/

上面两种思路其实是异曲同工,需要注意的是在移动事件里,还要处理元素边缘的位置,以防止元素被拖动的时候拖到浏览器以外的地方;直接来看代码:
代码一:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
    }

    function move(event) {
      if (isDown == true) {
        var x = parseInt(mousePosition(event).x - posX + ObjLeft);
        var y = parseInt(mousePosition(event).y - posY + ObjTop);
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        if (x < 0) {
          x = 0
        } else if (x > w) {
          x = w
        };
        if (y < 0) {
          y = 0
        }else if (y > h) {
          y= h
        };

        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }

    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

代码二:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
      offsetX=posX-ObjLeft;
      offsetY=posY-ObjTop;
    }

    function move(event) {
      if (isDown == true) {
        var x=mousePosition(event).x-offsetX
        var y=mousePosition(event).y-offsetY
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        x=Math.min(w,Math.max(0,x));
        y=Math.min(h,Math.max(0,y));
        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }

    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

代码一对应原理一,代码二对应原理二,效果都是一样的,只不过原理二是在原理一的基础上演变过来的,演变之后,元素拖动的边缘处理也相应的做了变化。

以上就是本文的全部内容,希望对大家的学习有所帮助。

<html>
<head>
<script type="text/javascript">
var x;
var y;
function $(id)
{
return document.getElementById(id)
}
function mousedown()
{
x=event.clientX-$("px").style.pixelLeft;
y=event.clientY-$("px").style.pixelTop;
$("px").style.border="2px solid red";
$("px").onmousemove = mousemove;
}
function mouseup()
{
$("px").onmousemove = "";
$("px").style.border="";
}
function mousemove()
{
$("px").style.pixelLeft=event.clientX-x;
$("px").style.pixelTop=event.clientY-y;
}
</script>
</head>
<body>
<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"
onmousedown="mousedown()" onmouseup="mouseup()" >
</div>
</body>
</html>

可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了。

您可能感兴趣的文章:

  • javascript html5 canvas实现可拖动省份的中国地图
  • JS+CSS实现可拖动的弹出提示框
  • js实现可拖动DIV的方法
  • 原生JS可拖动弹窗效果实例代码
  • html+javascript实现可拖动可提交的弹出层对话框效果
  • js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
  • js 可拖动列表实现代码
  • javascript div 弹出可拖动窗口
  • javascript之可拖动的iframe效果代码
  • js实现当复选框选择匿名登录时隐藏登录框效果
  • 原生js实现可拖动的登录框效果

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:javascript弹出拖动窗口_javascript技巧_脚本之家

关键词:

jquery实现点击展开列表同时隐藏其他列表_jquery_脚本之家

本文实例呈报了jquery达成点击打开列表相同的时候掩盖其余列表。分享给大家供我们参考。具体如下: 原生js实现新...

详细>>

JavaScript中伪协议 javascript:使用探讨_javascript技巧_脚本之家

废话不多说,先上个效果图: 将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中。这个...

详细>>

jquery表单插件Autotab使用方法详解,jqueryautotab

jQuery过滤器插件fastLiveFilter//jquery.fastLiveFilter.jsjQuery.fn.fastLiveFilter = function { options = options || {}; list = jQuery; var input = ...

详细>>

jQuery中remove方法用法实例_jquery_脚本之家

remove(State of Qatar方法的定义和用法: 本文实例陈述了jQuery中remove(卡塔尔方法用法。分享给我们供我们参谋。具体解析...

详细>>