vue组件开发之-可拖拽对话框

前言：最近工作大忙，项目功能新增频繁，客户得美观追求高，带来了工作量的激增，心里不禁想长叹一句：这种审美能力如果能在项目之初展现就好了。无心之际，想起了之前写的对话框的可拖拽效果，今天拿来再完善一下。

正文：

1.初衷:加拖的初衷是饿了么ui对话框没有拖拽效果，感觉体验不好，开始的做法是在组件的钩子里添加事件监听，如果想在其他地方使用，必须再写同样的监听逻辑，虽然我们可以把代码抽离出来，但多处引用的方式依然，本质问题仍在，复用率低代码冗余高，果断抛弃。

2.查资料:翻看vue文档发现可以注册全局指令，用于DOM元素的底层处理，这个挺靠谱。

Vue.directive( 指令名,{ 钩子函数 } )

3.思路:很简单:首先记录整个对话框距离文档边界的左边距和上边距（当然你监听右边距也oK的，但是别监听下边距，因为我们一般是设置上边距，饿了么也是如此。正如我们调整高度时，会说往下拉一点，或者往上去一点）。鼠标按下的时候监听mousedown事件，记录鼠标距离对话框边界的距离（左边距LEFT，上边距TOP）.然后监听document的mousem