常见案例 - 简书

简单拖拽功能

<!DOCTYPE html>
<html>
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>拖拽</title>
    </head>
<body>
<div id="div1" style="width:100px; height:100px; background:red; position:absolute;"></div>
<script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById('div1');
    oDiv.onmousedown = function(event){
        var reX = event.offsetX;
        var reY = event.offsetY;
        var x   = event.clientX ;
        var y   = event.clientY ;
        document.onmousemove = function(event){
            var L = event.clientX - reX;
            var T = event.clientY - reY;
            if(L<100){
                L=0;
            }
            if(T<0){
                T=0
            }
            oDiv.style.left = L +"px";
            oDiv.style.top  = T + "px";
            console.log("offsetX:"+reX);
            console.log("offsetY:"+reY);
            console.log("clientX:"+x);
            console.log("clientY:"+y);
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
}
</script>
</body>
</html>