拖拽的实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style type="text/css">
        .box1{
            400px;
            height: 400px;
            background-color: firebrick;
        }
    </style>
</head>
<body>

<div class="box1" id="box1">

</div>
<script type="text/javascript" src="">

var div=document.getElementById('box1');

function setPosition(x,y){
    div.style.msTransform='translate('+x+'px,'+y+'px)';
    div.style.WebkitTransform='translate('+x+'px,'+y+'px)';
    div.style.OTransform='translate('+x+'px,'+y+'px)';
    div.style.MozTransform='translate('+x+'px,'+y+'px)';
    div.style.transform='translate('+x+'px,'+y+'px)';
}

div.initPosition={
    x:div.getBoundingClientRect().left,
    y:div.getBoundingClientRect().top
};

div.addEventListener('mousedown',function(event){

    this.downPosition={
        x:event.offsetX,
        y:event.offsetY
    };
    document.addEventListener('mousemove',handleMouseMove,false);
    document.addEventListener('mouseup',releaseMouse,false);
},false);

function handleMouseMove(event){
    var x=event.clientX-div.downPosition.x-div.initPosition.x;
    var y=event.clientY-div.downPosition.y-div.initPosition.y;
    setPosition(x,y);
}

function releaseMouse(){
    document.removeEventListener('mousemove',handleMouseMove,false);
    document.removeEventListener('mouseup',releaseMouse,false);
}


</script>
</body>
</html>