div拖拽

分析逻辑关于该过程有一下3个动作

1、点击 2、移动 3、释放鼠标

1、点击时获得点击下去的一点的坐标（盒子的top，left），去除默认事件。

2、移动时不断改变盒子的坐标。（移动的dom目标应该为document不然容易被甩出去）。

3、鼠标释放。清除document的时间。还有改变位置。

4、注意如果鼠标在点击目标时速度太快离开了目标，要马上纠正。

写了个简单的方法：

<style type="text/css">
*{margin: 0; padding: 0;}
 #box{ 300px; height: 200px; border:1px solid #999; position: fixed; top: 20px; left: 20px;}  
 #header{ 100%; height: 50px; background-color: #999;} 
</style>
<body>
<div id="box">
    <div id="header"></div>
    <div>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
    </div>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
var header = document.getElementById('header');
new fnDrag(header,box);
</script>

这是我简单分装的一个方法：

/**
 *
 用于拖拽
 *
 @method fnDrag
 *
 @param {DOM} select 点击可触发拖拽的区域
 *
 @param {DOM} container 移动的区域
 *
 created by toMatthew on 17/11/27.
 *
 usage new fnDrag(header, container);
 *
 */
;(function(win, document){
    // 公用方法开始
    // 返回元素位置
    function toBoxPosition(dom, x, y) {
        var moveBox = dom.getBoundingClientRect();///包围盒的信息
        return {x: parseInt(x - moveBox.left), y: parseInt(y - moveBox.top) };
    }

    var fnDrag = function(select, container) {
        var self = this;
        self.select = select;
        self.container = container;
        self.isMouseDown = false;
        self.point = {x:0,y:0};

        self.getPosition = function(e) {
            if(self.isMouseDown) {
                self.container.style.top = parseInt(e.clientY - self.point.y)+'px';
                self.container.style.left = parseInt(e.clientX - self.point.x)+'px';
            }
        }

        self.bodyMove = function(e) {
            e.preventDefault();
            self.getPosition(e);
        }

        self.fnClear = function(e) {
            document.removeEventListener('mousemove', self.bodyMove);
            document.removeEventListener('mouseup', self.fnMouseUp);
            self.select.removeEventListener('mouseout', self.bodyMove);
            self.select.removeEventListener('mouseup', self.fnMouseUp);
        }

        self.fnMouseUp = function(e) {
            if(self.isMouseDown) {
                e.preventDefault();
                self.isMouseDown = false;
                self.fnClear(e);
            }
        }

        // 监听select区域点击
        self.select.addEventListener('mousedown', function(e) {
            e.preventDefault();//阻止默认事件，取消文字选中 
            self.isMouseDown = true;
            self.point = toBoxPosition(self.container, e.clientX , e.clientY);

            // 监听body移动
            document.addEventListener('mousemove', self.bodyMove, false);

            // 移出select区域
            self.select.addEventListener('mouseout', self.bodyMove, false);

            // 鼠标抬起
            self.select.addEventListener('mouseup', self.fnMouseUp, false);
            document.addEventListener('mouseup', self.fnMouseUp, false);

        }, false);
    }

    win.fnDrag = fnDrag;
})(window, document);