vue中利用原生js实现拖拽

思路：利用一个值判断鼠标的mousedown事件或者移动端的touchstart是否触发，利用另一个值表示鼠标的mousemove和touchmove事件是否触发，如果触发获取鼠标或者点击处相对于屏幕的偏移值，利用dom循环获取参照物相对于侧边屏幕的偏移值，然后两者相减取正，即为所拖拽的div相对于参照物的偏移值，再让1其在偏移处显示，如此即可实现拖拽。

 

<template>
  <div id='alertSlider' class='alertSlider'>
    <div id="lineDiv" ref='bg'
         class="lineDiv" :class="{
           alert0: DEV.detailTaskAlert == 0,
           alert1: DEV.detailTaskAlert == 1,
           alert2: DEV.detailTaskAlert == 2,
           alert3: DEV.detailTaskAlert == 3,
           alert4: DEV.detailTaskAlert == 4,
           alert5: DEV.detailTaskAlert == 5,
           alert6: DEV.detailTaskAlert == 6,
           alert7: DEV.detailTaskAlert == 7,
           alert8: DEV.detailTaskAlert == 8,
           alert9: DEV.detailTaskAlert == 9,
           alert10: DEV.detailTaskAlert == 10
         }"
        >
      <div ref='slider' id="minDiv" class="minDiv">
        <div id="vals" class="vals" >{
  {DEV.detailTaskAlert}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import {mapState,mapActions,mapMutations} from 'vuex';
export default {
   name: 'alertSlider',
   props: {
    alert: {
        type: Number,
        default: 0
    },
    width: {
        type:String,
        default: '100%'
    },
    bgColor: {
      type: String,
      default: 'bg0'
    },
    isOtherUser:{
      type:Boolean,
      default:false
    }
   },
   data(){
     return {
      isMousedown: false,
     }
   },
   mounted(){
     this.initAlert();
     /* this.$nextTick(()=>{
       this.initAlert();
     }) */
   },
   computed: {
      ...mapState(['DEV'])
   },
   updated:function(){
     if(this.$refs.bg){
      if(this.$refs.bg.offsetWidth&&this.$refs.bg.offsetWidth!=undefined){
          let initLeft=(this.$refs.bg.offsetWidth - 15)*this.DEV.detailTaskAlert/10;
          this.$refs.slider.style.left = initLeft + "px";
      }
     }
   },
   methods: {
     start(){
       this.isMousedown = true;
       console.log("this.isMousedown: