JS 拖动div效果

<style>
* {
    margin:0px;
    padding:0px;
}
#move {
    width:200px;
    height:200px;
    background:orange;
    position:absolute;
}
</style>
<div id="move"></div>

<script type="text/javascript">
//获取元素
var move = document.getElementById('move');

var l = 0;
var t = 0;
var x = 0;
var y = 0;
var isDown = false;//检测鼠标是否按下

//鼠标的按下事件
move.onmousedown = function(e){
    //获取当前初始位置div的位置
    l = move.offsetLeft;
    t = move.offsetTop;
    //获取初始位置鼠标的水平位置
    x = e.clientX;
    y = e.clientY;
    move.style.cursor = 'move';
    //修改的鼠标的按下状态
    isDown = true;
}    

window.onmousemove = function(e) {
    //检测鼠标是否按下
    if(!isDown) return;
    var _x = e.clientX;
    var _y = e.clientY;

    //计算最终的left和top值
    var _l = _x - (x - l);
    var _t = _y - (y - t);

    //设置样式
    move.style.left = _l + 'px';
    move.style.top = _t + 'px';
}

move.onmouseup = function() {
    isDown = false;
    move.style.cursor = 'default';
}
</script>