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

                document.  = 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.  = function (e) {               
                    document.  = null;
                    document.  = null;
                };
            };

            function  (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\', );
            addEvent(oDiv,\'DOMMouseScroll\', );
            function addEvent(obj,xEvent,fn) {
                if(obj.attachEvent){
                    obj.attachEvent(\'on\'+xEvent,fn);
                }else{
                    obj.addEventListener(xEvent,fn,false);
                }
            }
        }
    }
);
收藏 打印