zoukankan      html  css  js  c++  java
  • 实现小窗口拖拽的效果

    <!DOCTYPE html>

    <html>

     

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    #box {

    height: 300px;

    width: 300px;

    background-color: green;

    position: absolute;

    }

    </style>

    </head>

     

    <body>

    <div id="box">

     

    </div>

    </body>

    <script type="text/javascript">

    var box = document.getElementById("box");

    //鼠标按下的函数

    box.onmousedown = function(ev) {

    var oEvent = ev || event;

    //求出鼠标和box的位置差值

    var x = oEvent.clientX - box.offsetLeft;

    var y = oEvent.clientY - box.offsetTop;

    //鼠标移动的函数

    //把事件加在document上,解决因为鼠标移动太快时,

    //鼠标超过box后就没有了拖拽的效果的问题

    document.onmousemove = function(ev) {

    var oEvent = ev || event;

     

    //保证拖拽框一直保持在浏览器窗口内部,不能被拖出的浏览器窗口的范围

    var l = oEvent.clientX - x;

    var t = oEvent.clientY - y;

    if(l < 0) {

    l = 0;

     

    } else if(l > document.documentElement.clientWidth - box.offsetWidth) {

    l = document.documentElement.clientWidth - box.offsetWidth;

    }

    if(t < 0) {

    t = 0;

    } else if(t > document.documentElement.clientHeight - box.offsetHeight) {

    t = document.documentElement.clientHeight - box.offsetHeight;

    }

    box.style.left = l + "px";

    box.style.top = t + "px";

    }

    //鼠标抬起的函数

    document.onmouseup = function() {

    document.onmousemove = null;

    document.onmouseup = null;

    }

    //火狐浏览器在拖拽空div时会出现bug

    //return false阻止默认事件,解决火狐的bug

    return false;

     

    }

    </script>

     

    </html>

  • 相关阅读:
    ubuntu 12.04 LTS 如何使用更快的更新源
    虚拟机安装ubuntu问题解决办法
    云计算
    Hadoop多节点集群安装配置
    Apache Lucene学习笔记
    Struts2运行流程
    数据结构与算法分析 java语音描述(引论)
    事物与分布式事物原理实践
    Get,Post请求中文乱码问题有效解决方法
    Vue2.5开发去哪儿网App 第四章笔记 下
  • 原文地址:https://www.cnblogs.com/niuniudashijie/p/6127993.html
Copyright © 2011-2022 走看看