Javascript 如何制作按钮，使其只能拖动到一定程度？

我想知道是否有可能这样做，当你把鼠标移到一个按钮上，使它向右或向左移动时，它只移动了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>

//= 0 )
{
slidingDiv.style.left=parseInt（slidingDiv.style.left）-200+“px”；
设置超时（slideIt，1）；
}
}
if（actionReturn==“toLeft”）{
if（parseInt（slidingDiv.style.left）

您需要定义三个标志（即三个变量）来跟踪移动；因此，您需要定义一个用于指示按钮位于其原始位置，一个用于指示按钮已向右移动，另一个用于指示按钮已向左移动。这些变量将保存布尔值（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>

var isInOriginalPosition=真；
var isShiftedToRight=错误；
var isShiftedToLeft=假；
函数slideIt（actionReturn）{
var slidingDiv=document.getElementById（“d1”）；
var停止位置=50；
var startPosition=slidingDiv.offsetWidth+slidingDiv.offsetWidth；
如果（actionReturn==“toRight”）{
如果（isShiftedToRight&！isInOriginalPosition）
{
返回；
}
else if（isShiftedToLeft&！isInOriginalPosition）
{
slidingDiv.style.left=parseInt（slidingDiv.style.left）-200+“px”；
设置超时（slideIt，1）；
isShiftedToLeft=假；
isInOriginalPosition=真；
}
else if（isInOriginalPosition）
{
slidingDiv.style.left=parseInt（slidingDiv.style.left）-200+“px”；
设置超时（slideIt，1）；
isShiftedToRight=真；
isInOriginalPosition=假；
}
}
if（actionReturn==“toLeft”）{
如果（isShiftedToLeft&！isInOriginalPosition）
{
返回；
}
else if（isShiftedToRight&！isInOriginalPosition）
{
slidingDiv.style.left=parseInt（slidingDiv.style.left）+200+“px”；
设置超时（slideIt，1）；
isShiftedToRight=错误；
isInOriginalPosition=真；
}
else if（isInOriginalPosition）
{
slidingDiv.style.left=parseInt（slidingDiv.style.left）+200+“px”；
设置超时（slideIt，1）；
isShiftedToLeft=真；
isInOriginalPosition=假；
}
}
}

我删除了C#标记，并添加了其他看起来更合适的标记。如果

ASP.NET

不正确，请随时重新编辑。请检查我在编辑版本中添加的代码。只需进入不同的滑动动作，以确保其正常工作：）谢谢！我不得不换了两面旗子，这太完美了！使用此代码，我不能将其向右移动超过1次。有没有办法解决这个问题？嗯，你的页面是否需要允许按钮多次向右/向左移动？允许移动的次数是多少？在我更改脚本之前，我能够来回移动它，不管我想移动多少次