VUE实现自定义指令v-drag与拖拽的实现 + 可用案例代码下载

所用知识点-vue官网钩子函数
vue部分

<template>
  <div>
    <div id="dragTest"
        style="position: fixed;top: 13%;left: 70%;z-index: 2110;
        width: 540px;background:  #ffffff;box-shadow: 0 4px 8px 0 #eeeeee;
        border-radius: 4px;left: 20%;top: 20%; width:200px;
        " >
      <div style="display: flex;
                  cursor: move;
                  justify-content: space-between;
                  height: 40px;
                  line-height: 40px;
                  padding: 0 20px;
                  color: #ffffff;
                  background: #59dacd;
                  border-top-right-radius: 4px;
                  border-top-left-radius: 4px;">
            <span  v-drag:#dragTest v-drag="2">
              <span >拖拽测试</span>
            </span>
            <i class="iconfont icon-wrong" ></i>
      </div>
    </div>
  </div>
</template>
<script>
import drag from '../../../../directive/drag'
export default {
    
    
  name: 'MarkingCorrecting',
  directives: {
    
     drag },
}
</script>

JS代码：
链接：https://pan.baidu.com/s/1-ILXYXbRSabtBO40imYlhQ?pwd=bjcx
提取码：bjcx

最终效果