vue鼠标拖拽添加数据（小demo）

原理主要是让文本跟随鼠标移动，然后修改相应拖拽位置的数据值，主要使用mousedown和mouseup

<template>
  <div class="flex" style="display:flex">
    <div class="options">
      <div v-for="(item,index) in optionsArr" :key="index" @mousedown.prevent="move(item)">{{item}}</div>
      <!-- 跟随鼠标移动的文本 -->
      <div class="mouse" ref="mouse">{{mouseText}}</div>
    </div>
    <div class="objects" style="margin-left:100px">
      <h1 @mouseup="add">科目</h1>
      <div v-for="(item,index) in subjectArr" :key="index" @mouseup="add">{{item}}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      mouseText: '',
      optionsArr: ['英语', '数学', '语文', '暂定'],
      subjectArr: ['政治']
    }
  },
  mounted () {
    window.onmouseup = () => {
      this.mouseText = ''
    }
  },
  methods: {
    move (item) {
      this.mouseText = item
      window.onmousemove = () => {
        const e = event || window.event;
        this.$refs.mouse.style.top = e.pageY + 'px'
        this.$refs.mouse.style.left = e.pageX + 15 + 'px'
      }
    },
    add () {
      this.subjectArr.push(this.mouseText)
    }
  }
}
</script>
 
<style>
* {
  cursor: default;
}
.mouse {
  position: absolute;
}
</style>