vue 拖拽

 <div ref="demo">
        <article v-for="item in divData" :key="item.id" :ref="'container-' + item.id" @click="clickHandle(item.id)"   @mousedown="mouseDownHandle(item.id, $event)" @mouseup="mouseUpHandle(item.id, $event)">
          <div>{{item.titlie}}---{{item.id}}</div>
          <div>{{item.titlie}}---{{item.id}}</div>
          <div>{{item.titlie}}---{{item.id}}</div>
        </article>
      </div>

 data() {
    return {
      divData:[
        {titlie: '测试一', id:'001'},
        {titlie: '测试二', id:'002'},
        {titlie: '测试三', id:'003'},
        {titlie: '测试四', id:'004'},
        {titlie: '测试五', id:'005'}
      ],
      moveData: {},
      activeMove: null
    };
  },
  watch: {
    activeMove (newVal, oldVal) {
      this.divData.forEach(item => {
        console.log(item)
        this.$refs[`container-${item.id}`][0].style.zIndex = 1
      })
      if (oldVal) {
        this.$refs[`container-${oldVal}`][0].style.zIndex = 2
      }
      this.$refs[`container-${newVal}`][0].style.zIndex = 3
    }
  },
methods: {
    // 解决层级关系错乱问题（当移动到一个位置时，层级关系）
    clickHandle (id) {
       //console.log(this.$refs[`container-${id}`][0])
       //this.$refs.demo.removeChild(this.$refs[`container-${id}`][0])
       //this.$refs.demo.appendChild(this.$refs[`container-${id}`][0])
    },
    // 拖拽-鼠标放下
    mouseDownHandle (id, event) {
      this.activeMove = id
      //this.clickHandle(id)
      if (this.moveData[id]) {
        this.moveData[id].x = event.pageX - this.$refs[`container-${id}`][0].offsetLeft,
        this.moveData[id].y = event.pageY - this.$refs[`container-${id}`][0].offsetTop
      } else {
        this.moveData[id] = {
          x: event.pageX - this.$refs[`container-${id}`][0].offsetLeft,
          y: event.pageY - this.$refs[`container-${id}`][0].offsetTop
        }
      }
      event.currentTarget.style.cursor = 'move'
      window.onmousemove = this.mouseMoveHandle
    },
    // 拖拽-鼠标移动
    mouseMoveHandle (event) {
      let moveLeft = event.pageX - this.moveData[this.activeMove].x + 'px'
      let moveTop = event.pageY - this.moveData[this.activeMove].y + 'px'
      console.log(event)
      this.$refs[`container-${this.activeMove}`][0].style.left = moveLeft
      this.$refs[`container-${this.activeMove}`][0].style.top = moveTop
    },
    // 拖拽-鼠标离开
    mouseUpHandle (id, event) {
      window.onmousemove = null
      event.currentTarget.style.cursor = 'move'
    },
}

  article:nth-of-type(1){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(2){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 420px;
    left: 50px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(3){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 420px;
    right: 30px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(4){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 620px;
    left: 30px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
    article:nth-of-type(5){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 60px;
    right: 30px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }