• 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>
  • 相关阅读:
    2012-2013年度大总结
    [每日一题] 11gOCP 1z0-052 :2013-08-31 数据库的存储结构....................................................A8
    Oracle约束操作
    几道字典树题目
    1032
    uva 10718 Bit Mask(贪心)
    找工作笔试面试那些事儿(2)---内存管理那些事
    汉语-词语:结构
    汉语-词语:形式
    汉语-词语:方向
  • 原文地址:https://www.cnblogs.com/yunyin/p/14770324.html
Copyright © 2020-2023  润新知