js实现拖拽功能Drag（并用Vue封装成自定义指令v-drag）_综合

首先是三个事件，分别是mousedown，mousemove，mouseup。
当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。
clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetLeft和offsetTop来表示元素的元素的初始坐标。
也就是说定位信息为：鼠标移动时候的坐标 - 鼠标按下去时候的坐标 + 元素初始情况下的坐标（元素.offetLeft/offetTop）。
总结为：鼠标移动时候的坐标 - 鼠标相对于元素的坐标（在mousedown中就要定义）
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的left以及top等等值。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src='../Vuedemo/vue.js'></script><title>鼠标拖拽元素实现</title><style type="text/css">*{
    margin: 0px;}#demo {
    width: 100px;height: 100px;position: absolute;background: red;}</style>
</head>
<body><div id="app" ><div id="demo" v-drag></div></div><script type="text/javascript">var vm = new Vue({
    el:'#app',data:{
    },methods:{
    },directives:{
    drag(el,binding){
    var isDrag = false;//鼠标事件1 - 鼠标点击的时候（标记元素为可拖动）el.addEventListener('mousedown', function(e) {
    var e = e || window.event;mouseOffsetX = e.offsetX;  //鼠标相对于被触发元素的位置mouseOffsetY = e.offsetY;  isDrag = true;})//鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）document.onmouseup = function(e) {
    isDrag = false;}//鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动）document.onmousemove = function(e) {
    var e = e || window.event;var mouseX = e.clientX; //鼠标当前的位置var mouseY = e.clientY;if (isDrag) {
    //获取页面宽度高度var pageWidth = window.innerWidth;var pageHeight = window.innerHeight;//获取元素的宽高var elWidth = el.offsetWidth; var elHeight = el.offsetHeight;//最大能够移动的距离var maxX = pageWidth-elWidth; var maxY = pageHeight-elHeight;// 鼠标移动的距离var moveX = mouseX- mouseOffsetX;var moveY = mouseY - mouseOffsetY;//给元素设置移动限制var moveX = Math.min(maxX, Math.max(0, moveX));var moveY = Math.min(maxY, Math.max(0, moveY));// 给元素的宽高赋值el.style.left = moveX + 'px';el.style.top = moveY + 'px';}};}}})</script>
</body>
</html>