拖动时不规则移动

问题描述

我正在尝试制作图像滑块/转盘。差不多完成了，只是最后一个问题。因此，该旋转木马中的项目在拖动时会移动。他们获得动力并逐渐停止。因此，如果我再次拖动，而它们仍在移动，则曾经发生的事情是-它们将停止，然后根据新的阻力进行移动。我真正想要的是-如果拖动方向与当前运动方向相同，则更高的速度（从当前运动速度和新的拖动速度）应该是新速度。基本上，我正在尝试模拟移动滚动。没什么大不了的，我写了代码以获得后一个结果，但是它并没有按预期工作。结果很奇怪。动画会更快，更突然地停止。完全不同。由于mouseDown事件处理程序中的第45行/最后一行（将速度重置为0），因此该项目按以前的方式工作（即新速度基于最新拖动）。如果您在第45行添加注释，则会弹出该问题。 Without line 45 With line 45 编辑：刚刚意识到，当速度达到特定阈值时，即使第二个也表现出不同的行为。

var projectContainer = document.querySelector(".project-container")
var projects = document.querySelectorAll(".project")

// exProject is declared so that every project has same transalte to refer to instead of referring to their individual transalations
var exProject = projects[0]
var style = window.getComputedStyle(exProject)
exProject.currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41

// after dragging,do not add force if mouse has not been moved for pauseTime milliseconds
pauseTime = 40
lastMousePositions = []

//this will set margin to 80,i thought this is better than hardcoding
elementAOffset = projects[0].offsetLeft;
elementBOffset = projects[1].offsetLeft;
elementAWidth = parseInt(getComputedStyle(projects[0]).width)
margin = (elementBOffset - (elementAOffset + elementAWidth))

//projects will teleport to other side if they hit either of the boundary
LeftSideBoundary = -(elementAWidth)
RightSideBoundary = (elementAWidth * (projects.length)) + (margin * (projects.length))

RightSidePosition = RightSideBoundary - elementAWidth;

//how often to update speed (in milliseconds)
intervalTime = 15

//how much speed is lost at every interTime milliseconds
frictionPerMilliseconds = (20 / 1000);
frictionPerMilliseconds *= intervalTime * 5;

mouseInitialPosition = 0;
mouseIsDown = false
startTime = 0;
speed = 0;
mousemoving = false


projectContainer.addEventListener("mousedown",e => {
    mouseInitialPosition = e.clientX
    mouseIsDown = true;
    startDate = new Date();
    startTime = startDate.getTime();
    lastMousePositions.push(e.clientX)
    // speed = 0
})


projectContainer.addEventListener("mousemove",e => {
    if (!mouseIsDown) return;
    distanceTravelled = e.clientX - mouseInitialPosition

    if (speed === 0) {
        projects.forEach(project => {
            project.style.transform = 'translateX(' + ((exProject.currentTranslationX) + ((distanceTravelled))) + 'px)';
            shiftPosition(project,distanceTravelled)
        })
    }

    if ((new Date()).getTime() - lastMousePositions[lastMousePositions.length - 1][1] > 50) {
        lastMousePositions = []
    }
    pushToMousePositions(e.clientX)

})


projectContainer.addEventListener("mouseup",e => {
    dragEnd(e);
})

projectContainer.addEventListener("mouseleave",e => {
    dragEnd(e);
})

function dragEnd(e) {
    finalPosition = e.clientX;
    distanceTravelled = finalPosition - mouseInitialPosition
    endDate = new Date();
    endTime = endDate.getTime();

    timeElapsed = (endTime - startTime) / 1000

    mouseIsDown = false;

    tempSpeed = distanceTravelled / timeElapsed
    tempSpeed = (tempSpeed / 1000) * 15

    if (tempSpeed < 0 && speed < 0) {
        if (tempSpeed < speed) {
            speed = tempSpeed
        }
    } else if (tempSpeed > 0 && speed > 0) {
        if (tempSpeed > speed) {
            speed = tempSpeed
        }
    } else {
        speed = tempSpeed
    }

    if (lastMousePositions.length === 0) {
        console.log("error gonna pop up")
    }
    if (endTime - (lastMousePositions[lastMousePositions.length - 1])[1] >= pauseTime) {
        speed = 0
    }
    mouseExit(e)
    intervalFunction = setInterval(move,intervalTime)
}

function mouseExit(e) {
    mouseIsDown = false
    lastMousePositions = []

    var style = window.getComputedStyle(exProject)
    exProject.currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41

    projects.forEach(project => {
        project.style.transform = 'translateX(' + (exProject.currentTranslationX) + 'px)'
        shiftPosition(project,0)
    })
}

function move() {
    if (speed === 0) {
        clearInterval(intervalFunction)

    } else if (Math.abs(speed) <= frictionPerMilliseconds) {
        style = window.getComputedStyle(exProject)
        exProject.currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41

        projects.forEach(project => {
            project.style.transform = 'translateX(' + ((exProject.currentTranslationX) + (speed)) + 'px)'
            shiftPosition(project,0)
        })
        speed = 0
    } else {
        style = window.getComputedStyle(exProject)
        exProject.currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41

        projects.forEach(project => {
            project.style.transform = 'translateX(' + ((exProject.currentTranslationX) + (speed)) + 'px)'
            shiftPosition(project,0)
        })

        speed < 0 ? speed += frictionPerMilliseconds : speed -= frictionPerMilliseconds;

    }
}


function pushToMousePositions(positionToPush) {
    if (lastMousePositions.length < 50) {
        lastMousePositions.push([positionToPush,(new Date()).getTime()])
    } else {
        lastMousePositions.shift();
        lastMousePositions.push([positionToPush,(new Date()).getTime()])
    }
}

function shiftPosition(project,mouseMovement) {

    //projectVisualPosition is relative to the left border of container div
    projectVisualPosition = project.offsetLeft + (exProject.currentTranslationX + mouseMovement)
    tempStyle = window.getComputedStyle(project)

    if (projectVisualPosition < LeftSideBoundary) {
        project.style.left = ((parseInt(tempStyle.left) + RightSidePosition + 350) + 'px')
    }
    if (projectVisualPosition > RightSidePosition) {
        project.style.left = ((parseInt(tempStyle.left)) - (RightSidePosition + elementAWidth)) + 'px'
    }
}

*,*::before,*::after{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-size:0px;
    user-select: none;
    font-size:0;
}

body{
    position: relative;
}

.project-container{
    font-size: 0px;
    position: relative;
    width:1500px;
    height:400px;
    background-color: rgb(15,207,224);
    margin:auto;
    margin-top:60px;
    white-space: nowrap;
    overflow: hidden;
    padding-left:40px;
    padding-right:40px;
}

.project{
    font-size:100px;
    margin:40px;
    display: inline-block;
    height:300px;
    width:350px;
    background-color:red;
    border: black 3px solid;
    user-select: none;
    position: relative;
}

<div class="project-container">
  <div class="project">1</div>
  <div class="project">2</div>
  <div class="project">3</div>
  <div class="project">4</div>
  <div class="project">5</div>
  <div class="project">6</div>
  <div class="project">7</div>
  <div class="project">8</div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）