拖拽元素与覆盖效果-优快云博客

本文链接：https://blog.youkuaiyun.com/lizhengx/article/details/5928490

<html>
<head>
<title>拖拽及覆盖效果</title>
</head>

<body>
1
2
3
4
5

</body>
</html>

function MOVE()
{
    var win;
    var x0 = 0;
    var y0 = 0;
    var x1 = 0;
    var y1 = 0;
    var notie = document.getElementById && !document.all;
    var moving = false;

    this.start = function(o,e)
    {
        while(o.style.position!="relative" && o.style.position!="absolute")
   o = notie ? o.parentNode : o.parentElement;
  win = o;
        moving = true;
        x0 = parseInt(win.style.left + 0);
        y0 = parseInt(win.style.top + 0);
        x1 = notie ? e.clientX : event.clientX;
        y1 = notie ? e.clientY : event.clientY;
        document.onmousemove = drag;

  o.style.cursor = "move";
  o.style.background = "#ccc";

        return false;
    }

    var drag = function(e)
    {
        if(moving)
        {
            win.style.top = (notie ? y0 + e.clientY - y1 : y0 + event.clientY - y1) + "px";
            win.style.left = (notie ? x0 + e.clientX - x1 : x0 + event.clientX - x1) + "px";
            return false;
        }
    }

    this.stop = function()
    {
        moving = false;
  win.style.cursor = "array";
  win.style.background = "#ffffff";

  var nodes = getNodes("node");
  var x = win.offsetLeft;
  var y = win.offsetTop;
  var left, right, top, bottom;

for(var i=0; i<nodes.length; i++)
 {

 if(nodes[i] != win)
 {
 left = nodes[i].offsetLeft;
 right = left + nodes[i].offsetWidth;
 top = nodes[i].offsetTop;
 bottom = top + nodes[i].offsetHeight;

//alert("("+x+","+y+"),"+"["+left+","+right+"] "+"["+top+","+bottom+"]");

 if(left<=x && x<=right && top<=y && y<=bottom)
 {
 alert(win.innerHTML+"覆盖了"+nodes[i].innerHTML);
 break;
 }
 }
 }

 document.getElementById("history").innerHTML += win.innerHTML+" 高度: "+win.offsetHeight+" 宽度: "+win.offsetWidth+" x: "+win.offsetLeft+" y: "+win.offsetTop+" ";
 }
}
var move = new MOVE();
</script>