• js div拖拽(在固定区域内显示)


     div { position: absolute;  100px; height: 100px; background:#f00; }

     <div></div>

     
    <script type="text/javascript">     var oDiv = document.querySelector("div");     var cw = document.documentElement.clientWidth; //获取可视区域宽度     var ch = document.documentElement.clientHeight; //获取可视区域高度     var dw = oDiv.offsetWidth;  // 获取div的width+padding+border     var dh = oDiv.offsetHeight; // 获取div的height+padding+border     var mw = cw - dw; //计算div移动的最大宽度     var mh = ch - dh; //计算div移动的最大高度     oDiv.onmousedown = function (e) {       var evt = e || event;       var _x = evt.offsetX; //offsetX 鼠标距离事件源的左边距       var _y = evt.offsetY; //offsetY 鼠标距离事件源的上边距       document.onmousemove = function (e) {         var evt = e || event;         var x = evt.clientX - _x;         var y = evt.clientY - _y;         x = x < 0 ? 0 : x > mw ? mw : x;         y = y < 0 ? 0 : y > mh ? mh : y;         oDiv.style.left = x + "px";         oDiv.style.top = y + "px";       }       document.onmouseup function () {         document.onmousemove null;       }     }     /* 注意:onmouseup、onmousemove事件必须加在document上,否则如果事件添加在div上,        当鼠标移动过快移出div时,onmousemove、onmouseup事件会失效。 */   </script>
  • 相关阅读:
    Web Designer Intern
    Internship UI/UX Web Designer
    HTML / CSS Frontend Software Engineer Internship
    CSS 07 文本
    CSS 06 背景
    CSS 05 尺寸大小
    CSS 04 注释
    CSS 03 选择器
    Why Ancient Greeks are Always Nude
    C#表示空字符
  • 原文地址:https://www.cnblogs.com/yunyin/p/14770324.html
Copyright © 2020-2023  润新知