[JavaScript知识库]vue自定义指令完成一个拖拽

官方样例：自定义指令

<div class="box" v-drag></div>

.box {
  width: 100px;
  height: 100px;
  background: orange;
}

  directives: {
    //指令2
    drag: {
      // 指令的定义
      inserted: function (el) {
        console.log("el2",el)
        el.style.position='absolute'
        el.οnmοusedοwn=function(ev){
          console.log('ev',ev)
          var sX=ev.clientX-el.offsetLeft;
          var sY=ev.clientY-el.offsetTop;
          document.οnmοusemοve=function(ev){
            var eX=ev.clientX-sX;
            var eY=ev.clientY-sY;
            // 不断的更新元素的left、top值
            el.style.left=eX+'px'
            el.style.top=eY+'px'
          }

          document.οnmοuseup=function(){
            // 清除mousemove事件
            document.οnmοusemοve=null;
          }
        }
      },
    },
  },