div拖拽
分析逻辑关于该过程有一下3个动作
1、点击 2、移动 3、释放鼠标
1、点击时获得点击下去的一点的坐标（盒子的top，left），去除默认事件。
2、移动时不断改变盒子的坐标。（移动的dom目标应该为document不然容易被甩出去）。
3、鼠标释放。清除document的时间。还有改变位置。
4、注意如果鼠标在点击目标时速度太快离开了目标，要马上纠正。
写了个简单的方法：
<style type="text/css">
*{margin: 0; padding: 0;}
#box{width: 300px; height: 200px; border:1px solid #999; position: fixed; top: 20px; left: 20px;}
#header{width: 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);
