vue：控件的拖拽功能及注意事项

<div @contextmenu.prevent="openMenu"
     @mousedown="mouseMove"
     style="position: absolute; left: 1px; top: 1px">
</div>

<template>中屏蔽原生右键功能@contextmenu.prevent，取代为自定义函数openMenu，定义鼠标点击事件@mousedown为自定的mouseMove，同时在<div>块中定义菜单右键选项

<ul  v-show="visible">
    <li>菜单1</li>
    <li>菜单2</li>
</ul>

其中visiable在data中定义，并在watch中监听，具体为：

data() {
  return {
    visible: false,
  }
},
watch: {
  visible(val) {
    if (val) {
      document.body.addEventListener('mousedown', this.closeMenu)
    } else {
      document.body.removeEventListener('mousedown', this.closeMenu)
    }
  }
}

接着在methods中定义相应的方法

	openMenu() {
		this.visible = true
	    },
	closeMenu() {
    	this.visible = false
    },
    mouseMove(e) {
      if (e.which == 1) {
        let currentEl = e.target
        let disX = e.clientX - currentEl.offsetLeft
        let disY = e.clientY - currentEl.offsetTop

        // 屏蔽原生拖拽，必须！
        document.ondragstart = (e) => {
          e.preventDefault()
        }

        document.ondragend = (e) => {
          e.preventDefault()
        }

        document.onmousemove = (e) => {
            let left = e.clientX - disX
            // 对超出范围的处理
            left = left < 0 ? 0 : left
            left = left > currentEl.parentElement.scrollWidth ? currentEl.parentElement.scrollWidth : left
            let top = e.clientY - disY
            // 对超出范围的处理
            top = top > currentEl.parentElement.clientHeight ? currentEl.parentElement.clientHeight : top
            top = top < 0 ? 0 : top
            currentEl.style.left = left + 'px'
            currentEl.style.top = top + 'px'
        }

        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },

其中有屏蔽原生拖拽的方法：

        document.ondragstart = (e) => {
          e.preventDefault()
        }

        document.ondragend = (e) => {
          e.preventDefault()
        }

是必须要有的，如果不屏蔽原生拖拽，onmouseup事件无法在onmousemove过程中监听，造成的结果是虽然能成功实现拖拽功能，但是鼠标释放后还可以继续拖拽，直到第二次点击鼠标并释放。
另外要注意，该控件的position属性必须设置为absolute，父控件为relative,代码中的currentEl.style.left = left + 'px'能正确执行的前提条件是left的属性是在<div>中设置，在css中设置无效，使用css设置时需要使用setAttrbutes方法