vue指令-鼠标拖动

div盒子内有横向滚动条，用鼠标拖拽

•

按照小菜的尿性先放一个demo,最近用指令写东西蛮多的，发现指令真的是一个好东西。

@/util/dom.js文件

/**
 * 功能：dom绑定事件
 * 参数：element(dom节点)
 *      event(事件名称)
 *      handler(回调)
 *返回：无
 * */
export const on = function () {
    if (document.addEventListener) {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
}();

/**
 * 功能：移除dom绑定的事件
 * 参数：element(dom节点)
 *      event(事件名称)
 *      handler(回调函数)
 * 返回：无
 * */
export const off = function () {
    if (document.removeEventListener) {
        return function (element, event, handler) {
            if (element && event) {
                element.removeEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event) {
                element.detachEvent('on' + event, handler);
            }
        };
    }
}();

在directive文件夹下创建一个scroll.js文件，将下面代码复制进去


//盒子滚动条拖拽
import { on, off } from '@/util/dom';

let targetDrag = {  //托拽
    isDown: false,
    coord:{
        x: 0,
        y: 0
    }
}

//x轴拖动回调 鼠标按下
const scrollMousedown = event=>{
    targetDrag.isDown = true;
    targetDrag.coord.x = event.pageX;
    targetDrag.coord.y = event.pageY;
}
//x轴拖动回调  鼠标释放

const scrollMouseup = event=>{
    targetDrag.isDown = false;
    targetDrag.coord.x = 0;
    targetDrag.coord.y = 0;
}
//x轴拖动回调  鼠标移动

const scrollMousemove = (event,el)=>{

}

export const scrollx = {
    inserted:function(el){
        //鼠标按下
        on(el,'mousedown',scrollMousedown);
        //鼠标释放
        on(el,'mouseup',scrollMouseup);
        //鼠标托拽
        on(el,'mousemove',event=>{
            let movX = targetDrag.coord.x - event.pageX;
            targetDrag.coord.x = event.pageX;
            if(targetDrag.isDown){
                el.scrollLeft = el.scrollLeft + movX;
            }
        });
    },
    unbind:function(el){
        off(el,'mousedown',scrollMousedown);
        off(el,'mouseup',scrollMouseup);
        off(el,'mousemove',scrollMousemove);
        //清空
        targetDrag = {  //托拽
            isDown: false,
            coord:{
                x: 0,
                y: 0
            }
        }
    }
}


}

在需要vue文件中指令引入


directives:{
    scroll,
}

然后在dom

<div class="content" style="overflow-x:auto;"v-scrollx>
</div>