js 简单拖动窗口

转载于 2012-06-19 14:01:26 发布 · 450 阅读

文章标签：

本文介绍了一个简单的可拖动编辑器的实现方法。通过监听鼠标按下、移动和释放事件来调整编辑区域的位置，使用户能够直观地改变其在屏幕上的位置。

<div id='pop-editor' style='width: 520px;height:430px;border:1px solid red;position: absolute;left:100px;top:200px;' onmousedown='down(event)' onmouseup='up()'>asdfdsf</div>

var posX;  
var posY;  
var popDiv;  
var dragable;  
  
function down(e){  
    popDiv = document.getElementById("pop-editor");  
    e = e || window.event; //如果是IE   
    posX = e.clientX - parseInt(popDiv.style.left);     
    posY = e.clientY - parseInt(popDiv.style.top);  
    dragable = true;  
    document.onmousemove = move;  
}  
  
function move(ev){  
    if(dragable == true){  
        ev = ev || window.event;//如果是IE  
        popDiv.style.left = (ev.clientX - posX) + "px";     
        popDiv.style.top = (ev.clientY - posY) + "px";     
    }  
}  
  
function up(){  
    dragable = false;  
}