Nuxt 可拖动滑块在重新滑动时传送到鼠标位置

Question

我试过制作一个拖拉机滑块，乍一看似乎工作正常。但是不止一次滑动它，你会发现它出问题了。

它看起来像是在第一个鼠标移动时传送到鼠标位置。我已经尝试了几件事，但无法解决问题。

我的html:

<div class="container">
  <div class="slider-wrapper" v-on:mousemove="slide()">
    <div class="slider">
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
    </div>
  </div>
</div>

我的javascript:

export default {
  data() {
    return {
      mouseDown: 0,
      start: undefined,
      position: undefined,
    }
  },
  methods: {
    slide() {
      const vm = this
      document.body.onmousedown = function () {
        vm.start = window.event.clientX
        vm.mouseDown = 1
      }
      document.body.onmouseup = function () {
        vm.mouseDown = 0
      }
      if (this.mouseDown == 1) {
        vm.position = window.event.clientX - vm.start
        document.querySelector('.slider').style.left = vm.position + 'px'
      }
    },
  },
}

我重新创建了一个 demo 我的问题。

Answer 1

原来我需要在重新定位滑块之前记住旧的重新定位。为了解决这个问题，我更改了如下代码：

data() {
  return {
    mouseDown: 0,
    start: undefined,
    position: undefined,
    old_pos: 0 // initialize old_pos
  }
},

slide() {
  const vm = this
  document.body.onmousedown = function() {
    vm.start = window.event.clientX
    vm.mouseDown = 1
  }
  document.body.onmouseup = function() {
    vm.old_pos = vm.position + vm.old_pos // Sets old_pos when a new position has been set.
    vm.mouseDown = 0
  }
  if(this.mouseDown == 1) {
    vm.position = window.event.clientX - vm.start
    document.querySelector(".slider").style.left = vm.position + vm.old_pos + "px"; // Adds the old position as starting point of movement.
  }
}

Nuxt 可拖动滑块在重新滑动时传送到鼠标位置

Nuxt dragable slider teleports to mouse position upon re-sliding

javascript

slider

draggable

vue.js

nuxt.js