zoukankan      html  css  js  c++  java
  • DIV拖拽

     1     window.onload = function() {
     2         var oDiv = document.getElementById("div1");
     3         var disX = 0;
     4         var disY = 0;
     5 
     6         oDiv.onmousedown = function(ev) {
     7             var oEvent = ev || event;
     8 
     9             //记录鼠标相对DIV的距离
    10             disX = oEvent.clientX - oDiv.offsetLeft;
    11             disY = oEvent.clientY - oDiv.offsetTop;
    12 
    13             document.onmousemove = function(ev) {
    14                 var oEvent = ev || event;
    15                 var l = oEvent.clientX - disX;
    16                 var t = oEvent.clientY - disY;
    17 
    18                 //防止DIV移除到浏览器外面
    19                 if (l < 0) {
    20                     l = 0;
    21                 } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
    22                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
    23                 }
    24 
    25                 if (t < 0) {
    26                     t = 0;
    27                 } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
    28                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
    29                 }
    30 
    31                 oDiv.style.left = l + "px";
    32                 oDiv.style.top = t + "px";
    33             }
    34 
    35             document.onmouseup = function() {
    36                 document.onmousemove = null;
    37                 document.onmouseup = null;
    38             }
    39 
    40             //兼容FF
    41             return false;
    42         };
    43     };
  • 相关阅读:
    把Linux安装到移动硬盘上
    关于thinkphp 开发的网站部署问题
    lamp 网站打不开,不显示也不报错,
    前端之css语法3
    前端之css笔记2
    前端之练习2
    前端之css笔记1
    前端之笔记1
    前端之练习1
    MySQL之练习题5
  • 原文地址:https://www.cnblogs.com/HuoAA/p/5074176.html
Copyright © 2011-2022 走看看