Vue.js rangelider mousedrag无法正常工作

Question

我正试图让我的rangelider在vue.js中工作。由于某种原因，使用手机或鼠标拖动不起作用。点击工作完美。

任何线索？

这是我的RangeSlider.vue文件

<script>
  export default {
    props: {
      min: {
        required: true,
      },
      max: {
        required: true,
      },
      suffix: {
        required: false,
        default: '',
      },
      name: {
        required: true,
      }
    },

    data() {
      return {
        dragging: false,
        value: 0,
        id: '',
      };
    },

    mounted() {
      $(window).mouseup(e => {
        if (this.dragging) {
          this.dragging = false;
        }
      });

      $(window).mousemove(e => {
        if (this.dragging) {
          this.move(e);
        }
      });

      this.id = this.makeid();
    },

    methods: {
      drag() {
        this.dragging = true;
      },

      drop() {
        this.dragging = false;
      },

      move(e) {
        const sliderPos = $('#' + this.id + ' .range-slider-slider').offset().left;
        const sliderWidth = $('#' + this.id + ' .range-slider-slider').width();
        const min = 0;
        const max = sliderWidth - $('#' + this.id + ' .range-slider-handle').width();

        const position = Math.min(max, Math.max((e.pageX - 25) - sliderPos, min));

        $('#' + this.id + ' .range-slider-handle').css({
          left: position + 'px',
        });

        const n = this.max - this.min;
        const k = position / sliderWidth;
        const v = Number(Math.ceil(n * k)) + Number(this.min);

        if (v == this.max) {
          this.value = v + '+';
        } else {
          this.value = v;
        }
      },

      makeid() {
          var text = "";
          var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

          for( var i=0; i < 8; i++ )
              text += possible.charAt(Math.floor(Math.random() * possible.length));

          return text;
      }
    }
  };
</script>

<template>
  <div class="range-slider" :id="id">
    <input v-model="value" type="hidden" :name="name">
    <div class="range-slider-slider" @click="move"></div>
    <div :class="['range-slider-handle', dragging ? 'active' : '']" @mousedown="drag" @mouseup="drop"><span class="ranger-slider-label">{{ value }} {{ suffix }}</span></div>
  </div>
</template>

这是我的表格组

<div class="form-group">
    <label for="experience">{{ trans('position.experience') }}</label>
    <range-slider name="experience" min="0" max="10"></range-slider>
</div>