javascript - 如何制作一个按钮，使其只能被拖动到一定程度？

Question

我想知道是否有可能做到当您将鼠标悬停在按钮上以将其向右或向左移动时，它只移动 200 像素。因此，一旦它移动了 200px，就不能再移动 200px，但是一旦它移回原来的位置，它就可以再次移动 200px。

我有这个javascript代码

    <script type="text/javascript" language="javascript">
//<![CDATA[

// window.onload=function() {
//    document.getElementById("d2").onmouseover = slideIt("toRight");
//    document.getElementById("d3").onmouseover = slideIt("toLeft");
// };

function slideIt(actionReturn) {
    var slidingDiv = document.getElementById("d1");
    var stopPosition = 50;
    var startPosition = slidingDiv.offsetWidth+slidingDiv.offsetWidth;
    if (actionReturn ==  "toRight") {
        if (parseInt(slidingDiv.style.left) >= 0 )
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) - 200 + "px";
            setTimeout(slideIt, 1);
        }
    }
    if (actionReturn ==  "toLeft") {
        if (parseInt(slidingDiv.style.left) < startPosition ) {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) + 200 + "px";
            setTimeout(slideIt, 1);
        }
    }
}
//]]>
</script>

Answer 1

您需要定义三个标志(即三个变量)来跟踪运动；这样你就需要定义一个表示按钮在原来的位置，一个表示按钮向右移动，一个表示按钮向左移动。这些变量将保存 bool 值(真、假)。在每张幻灯片中，您需要检查这些标志以指定是否会实际发生转移。

这是对您的代码的建议更新:

 <script type="text/javascript" language="javascript">

 var isInOriginalPosition = true;
 var isShiftedToRight = false;
 var isShiftedToLeft = false;

 function slideIt(actionReturn) {
    var slidingDiv = document.getElementById("d1");
    var stopPosition = 50;
    var startPosition = slidingDiv.offsetWidth+slidingDiv.offsetWidth;
    if (actionReturn ==  "toRight") {
        if (isShiftedToRight && !isInOriginalPosition)
        {
            return;
        }
        else if (isShiftedToLeft && !isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) - 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToLeft = false;
            isInOriginalPosition = true;
        }
        else if (isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) - 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToRight = true;
            isInOriginalPosition = false;
        }
    }
    if (actionReturn ==  "toLeft") {
        if (isShiftedToLeft && !isInOriginalPosition)
        {
            return;
        }
        else if (isShiftedToRight && !isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) + 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToRight = false;
            isInOriginalPosition = true;
        }
        else if (isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) + 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToLeft = true;
            isInOriginalPosition = false;
        }
    }
}
</script>