Javascript水平拖动变换位置

我正在尝试创建一个水平滑块，可以向左/向右拖动，它将相应地更新其变换-平移位置。我想尝试用纯javascript实现这一点，所以请不要使用外部库

到目前为止，我所做的工作都是在初始加载时进行的，并将拖到它的位置，但之后它不会再次更新以继续

var object = document.querySelector('.js-slider-container'),
initX, firstX;

object.addEventListener('mousedown', function(e) {

  e.preventDefault();
  initX = this.style.transform;
  firstX = e.pageX;

  this.addEventListener('mousemove', dragIt, false);

  console.log(initX);

  window.addEventListener('mouseup', function() {
    object.removeEventListener('mousemove', dragIt, false);
  }, false);

}, false);

object.addEventListener('touchstart', function(e) {

  e.preventDefault();
  initX = this.style.transform;

  var touch = e.touches;
  firstX = touch[0].pageX;

  this.addEventListener('touchmove', swipeIt, false);

  window.addEventListener('touchend', function(e) {
    e.preventDefault();
    object.removeEventListener('touchmove', swipeIt, false);
  }, false);

}, false);

function dragIt(e) {
  this.style.transform = `translate3d(${initX+e.pageX-firstX}px,0,0)`;
}

function swipeIt(e) {
  var contact = e.touches;

  this.style.transform = `translate3d(${initX+contact[0].pageX-firstX}px,0,0)`;
}

这里有一个例子来说明我的意思，它在初始运行时起作用，但从那个时候起不会继续更新它的位置。我也不知道如何限制它的左右位置以避免过度滚动

---

感谢您的建议，干杯

首先，

此.style.transform的值将是一个空字符串
”
，稍后当您拖动它时，它将更新为
translate3d（-578px，0px，0px）

您直接在计算中使用此字符串值，而不选择仅
x
值，因此它失败

我们可以使用正则表达式选择
x
值，如下所示，然后在计算中使用它

 const txMatch = this.style.transform.match(/translate3d\((-?\d+)px,.+\)/);
 initX = txMatch ? +(txMatch[1] || 0) : 0;


var object=document.querySelector（'.js slider container'），
initX，firstX；
addEventListener（'mousedown'，函数（e）{
e、 预防默认值（）；
const txMatch=this.style.transform.match（/translate3d\（（-d+-px，.+\）/）；
initX=txMatch？+（txMatch[1]| | 0）：0；
firstX=e.pageX；
this.addEventListener（'mousemove'，dragIt，false）；
addEventListener（'mouseup'，function（）{
removeEventListener（'mousemove'，dragIt，false）；
}，假）；
}，假）；
object.addEventListener（'touchstart'，函数（e）{
e、 预防默认值（）；
const txMatch=this.style.transform.match（/translate3d\（（-d+-px，.+\）/）；
initX=txMatch？+（txMatch[1]| | 0）：0；
var-touch=e.touch；
firstX=触摸[0]。页面X；
this.addEventListener（'touchmove'，swipeIt，false）；
window.addEventListener（'touchend'，函数（e）{
removeEventListener（'touchmove'，swipeIt，false）；
}，假）；
}，假）；
函数dragIt（e）{
const maxMove=this.offsetWidth-this.parentElement.offsetWidth；
常数x=initX+e.pageX-firstX；
如果（x>=0 | | x若要对此进行扩展，您知道如何防止滑块向左和向右过度滚动。因此，从本质上说，平移不能变为负数，也不能继续通过最后一项？我试图检测样式是否低于0，但它只会终止操作。@HeyImArt，通过检查更新了答案。希望您注意这一点
grid模板列：重复（7，33.3333vw）；
默认情况下，无论其子元素是否少于7个，都将采用7个元素的宽度。因此，您将在最右边看到一些额外的空间，因为它只有5个元素。