元素拖拽

关于元素拖拽，注意：这里先不考虑浏览器兼容问题

<div class = "container" >
    <div id="move" style="position:absolute; width:100px; height:100px; background:greenyellow">
    </div>
</div>
<script type="text/javascript">
    var dragging=null,tLeft,tTop,moveElem=document.getElementById("move");
    document.addEventListener("mousedown", function (event) {
        if(event.target==moveElem){
            dragging=true;
            var target=event.target;
            tLeft=event.clientX-target.offsetLeft;
            tTop=event.clientY-target.offsetTop;
        }
    });
    document.addEventListener("mouseup", function (e) {
        dragging=false;
    });
    document.addEventListener("mousemove", function (e) {
        if(dragging){
            var moveX= e.clientX-tLeft,
                    moveY= e.clientY-tTop;
            moveElem.style.left=moveX+"px";
            moveElem.style.top=moveY+"px";
        }
    });
</script>

offsetLeft：指元素左边距离其包含元素的距离
offsetTop：指元素上边距离其包含元素的距离
clientX：鼠标按下时的x坐标
clientY：鼠标按下时的y坐标