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

【问题标题】：Nuxt dragable slider teleports to mouse position upon re-slidingNuxt 可拖动滑块在重新滑动时传送到鼠标位置
【发布时间】：2022-01-27 04:55:28
【问题描述】：

我尝试制作一个 Dragabe 滑块，乍一看它似乎工作正常。但是在多次滑动时，您会发现它出现问题。

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

我的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 我的问题。

【问题讨论】：

请在问题中添加代码，以便在删除 stackblitz 时问题不会丢失其值。

标签： javascript vue.js slider nuxt.js draggable

【解决方案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.
  }
}

【讨论】：