元素拖拽异常以及与点击事件冲突解决方法

一般的拖拽处理方法

<template>
  <div id="app">
    <div class="box" v-drag @click="clickEvent">123</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  directives: {
	  drag: function(el) {
		  let dragBox = el; //获取当前元素
		  dragBox.onmousedown = e => {
			  //算出鼠标相对元素的位置
			  let disX = e.clientX - dragBox.offsetLeft;
			  let disY = e.clientY - dragBox.offsetTop;
			  document.onmousemove = e => {
				  let left = e.clientX - disX;
				  let top = e.clientY - disY;
				  dragBox.style.left = left + "px";
				  dragBox.style.top = top + "px";
			  };
			  document.onmouseup = e => {
					document.onmousemove = null; 
				  document.onmouseup = null;
			  };
		  };
	  }
	},
  data() {
	  return {
		  
	  }
  },
  created() {
  	
  },
  mounted() {
  	
  },
  methods:{
	  clickEvent() {
		  console.log('点击事件')
	  }
  }
  
}
</script>

遇到的问题

1. click事件和onmousedown事件有时候会互相影响，拖拽的时候会触发点击事件
2. 经过拖拽后onmouseup事件有时候会不触发

解决后的代码

<template>
  <div id="app">
    <div class="box" v-drag>123</div>
  </div>
</template>

<script>
export default {
  name: "app",
  directives: {
    drag: function (el,data,vnode) {
      let dragBox = el; //获取当前元素
      dragBox.onmousedown = (e) => {
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = (e1) => {
			//解决onmouseup事件有时候不触发
			if ( e1.stopPropagation ) {
				e1.stopPropagation()
			}
			if ( e1.preventDefault ) {
				e1.preventDefault()
			}
			let left = e1.clientX - disX;
			let top = e1.clientY - disY;
			dragBox.style.left = left + "px";
			dragBox.style.top = top + "px";
        };
        document.onmouseup = (e2) => {
          document.onmousemove = null;
          document.onmouseup = null;
		  if ( e.clientX == e2.clientX && e.clientY == e2.clientY ) {
			  vnode.context.clickEvent()//想要添加的元素的点击事件
		  }
        };
      };
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
	  clickEvent() {
		  console.log('点击事件')
	  }
  },
};
</script>

最后祝大家在程序猿的路上远走远远，哈哈。。。