vue自定义拖拽指令

drag.js

import Vue from 'vue'

const drag=Vue.directive('drag',{

　　bind:function(el){

　　　　// 一般指针只有放在窗口的顶部才能拖动整个窗口，使用时在组件的顶部设置一个类名为dragHeader的元素

　　　　let dragHeader=el.querySelector(".dragHeader");

　　　　// 指针样式

　　　　dragHeader.style.cursor="move";

　　　　dragHeader.onmousedown=(e)=>{

　　　　　　var disx=e.pageX-el.offsetLeft;

　　　　　　var disy=e.pageY-el.offsetTop;

　　　　　　document.onmousemove=function(){

　　　　　　　　el.style.left=e.pageX-disx+'px';

　　　　　　　　el.style.top=e.pageY-disy+'px';

　　　　　　}

　　　　　　document.onmouseup=function(){

　　　　　　　　document.onmousemove=null;

　　　　　　　　document.onmouseup=null;

　　　　　　}

　　　　}　　　　

　　}

})

export default drag;

 

 

使用示例

A.vue

<template>

　　<div v-drag>

　　　　<div class="dragHeader"></div>

　　　　<div>....................</div>

　　</div>

</template>