Intenté hacer un control deslizante dragabe a primera vista, parece funcionar bien. Pero al deslizarlo más de una vez, notará que se sale.
Parece que se teletransporta a la posición del mouse en el primer movimiento del mouse. He intentado varias cosas, pero no puedo entenderlo.
Mi 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>Mi 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' } }, }, }He recreado una demostración de mi problema.
Resulta que necesitaba recordar la antigua reposición antes de reposicionar el control deslizante. Para solucionar esto, cambié el código de la siguiente manera:
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. } }