vue下的自定义图片拖拽

Vue.directive('drag',   //自定义指令 
    {bind:function (el, binding) {
            let oDiv = el;   //当前元素
            let self = this;  //上下文
            oDiv.onmousedown = function (e) {
             //鼠标按下，计算当前元素距离可视区的距离
                let disX = e.clientX - oDiv.offsetLeft;
                let disY = e.clientY - oDiv.offsetTop;

                document.onmousemove = function (e) {
                  //通过事件委托，计算移动的距离 
                    let l = e.clientX - disX;
                    let t = e.clientY - disY;
                  //移动当前元素  
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                     //将此时的位置传出去
                    binding.value({x:e.pageX,y:e.pageY})
                };
                document.onmouseup = function (e) {               
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };

            function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
                var ev = ev || window.event;
                var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
                    down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
                if(down){
                    oDiv.style.width = oDiv.offsetWidth-20+'px';
                }else{
                    oDiv.style.width = oDiv.offsetWidth+20+'px';
                }
                if(ev.preventDefault){/*FF 和 Chrome*/
                    ev.preventDefault();// 阻止默认事件
                }
                return false;
            }
            addEvent(oDiv,'mousewheel',onMouseWheel);
            addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
            function addEvent(obj,xEvent,fn) {
                if(obj.attachEvent){
                    obj.attachEvent('on'+xEvent,fn);
                }else{
                    obj.addEventListener(xEvent,fn,false);
                }
            }
        }
    }
);