如何实现一个拖动选择时间段的时间选择器

<template>
  <div>
      <!-- 高级时间设置 -->
      <div class="timerBox" >
            <div class="timers">
                <div class="timers_t">
                    <div class="timers_tl">星期\时间</div>
                    <div class="timers_tr">
                      <div class="timers_trt">
                          <h4>00:00 - 12:00</h4>
                          <h4>12:00 - 24:00</h4>
                      </div>
                      <div class="timers_trb">
                          <span v-for="(item,idx) in timerinfo.hour" :key="idx">{
   {
   item}}</span>
                      </div>
                    </div>
                </div>
                <div class="timers_b">
                    <div class="timers_bl">
                        <span v-for="(item,idx) in timerinfo.weeks" :key="idx">{
   {
   item}}</span>
                    </div>
                    <div class="timers_br" id="timecontainer"  @mousedown="mousedownfn">
                        <div  :class="item==1?'selected list':'list'"  @click="changeOne(item,idx)"  @click.stop v-for="(item,idx) in timeList" :key="idx"></div>
                    </div>
                </div>
            </div>
            <div class="timerTips">
                <div class="timerTips_l">
                    <i-button type="primary"  >已选</i-button>
                    <i-button type="ghost" >未选</i-button>
              </div>
                <div  class="timerTips_r">
                    <span style="margin-right:15px;" @click="timerClean()">反选</span>
                    <span @click="AllClean()">清除</span>
                </div>
            </div>
      </div>
  </div>
</template>
<script>
import $  from 'jquery'
export default {
   
  data() {
   
    return {
   
      timeList: this.timeString,
      keepList:[
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
      ],
      keepList2:[],
      keepList3:[],
      changX:0,//父级margin等造成的横坐标偏移量
      changY:0,//父级margin等造成的纵坐标偏移量
      offsetY:0,//父级滚动条滚动造成的纵坐标偏移量
      selectBoxDashed: null,
      startX: null,
      startY: null,
      initx: null,
      scrollX:null,
      scrollY:null,
      inity: null,
      timerinfo:{
   
          hour:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
          weeks:['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      },
    }
  },
  props: {
   
    baiduData: {
   
      type: Object,
      default() {
   
        var arr= {
   
          name:''
        };
        return arr
      }
    },
    tencentData: {
   
      type: Object,
      default() {
   
        var arr= {
   
          name:''
        };
        return arr
      }
    },
    timeString: {
   
      type: Array,
      default() {
   
        let _timeArray = []
        for (let i = 0; i < 336; i++) {
   
          _timeArray.push(0)
        }
        return _timeArray
      }
    },
  },
  model: {
   
    event: 'triggertime'
  },
  mounted () {
   
    if(this.baiduData.name=='baidu'){
   
       this.changX=205;
       this.changY