如何制作一個按鈕，使其只能在一定程度上被拖動？

Question

我想知道是否有可能做到這一點，以便當您將鼠標懸停在一個按鈕上以將其向右或向左移動時，它僅移動了200px。 因此，一旦將其移動200像素，就不能再移動200像素，但是一旦將其移動回到其原始位置，就可以再次將其移動200像素。

我有這個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

您需要定義三個標志（即三個變量）來跟蹤運動； 這樣一來，您需要定義一個按鈕，該按鈕指示按鈕在其原始位置；一個按鈕，指示按鈕向右移動；一個按鈕，指示按鈕向左移動。 這些變量將保存布爾值（true，false）。 在每張幻燈片上，您需要檢查這些標志以指定是否實際發生移位。

這是對代碼的建議更新：

 <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>