如何在单击上\下\左\右按钮时将圆移动到div中

Question

我需要通过点击按钮来移动圆圈，但是圆圈不应该离边界太远。

这个方法只能向左和向下移动圆圈，但是使用margin并不是一个好方法。有没有一种方法可以相对于左/右/上/下的位置来改变圆圈的位置而不是margin？

(function(){

    var button = document.getElementsByClassName("button");
    var circle = document.getElementById("circle");


    var down=0, up=0, left=0, right=0;

    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click',function(e){
                var position = e.currentTarget.value;
            if(position==="down"){
                down+=5;
                circle.style.marginTop = down +"px";
            }
            if(position==="up"){
                up+=5;
                circle.style.marginBottom = up+'px';
            }
            if(position==="left"){
                left+=5;
                circle.style.marginRight = left+'px';
            }
            if(position==="right"){
                right+=5;
                circle.style.marginLeft = right+'px';
            }

            }
        )
    }


    }());

html, body {
  font-size: 62.5%;
}

.border{
  position: relative;
  overflow: hidden;
  float: left;
  width: 70% ;
  height: 50rem;
  border: 1rem black solid;
  margin-right: 1rem;
}

.sidebar{
  position: relative;
  float: left;
  border: 1rem black solid;
  width: 25% ;
  height: 50rem;
}

.buttons{
  position: relative;
  width: 25rem;
  height: 21rem;
  top: 9rem;
  left: 4rem;
}

.button{
  position: absolute;
  width: 7rem;
  height: 7rem;
}

.arrow{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.arrow-up{
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 16px solid black;
}

.arrow-right{
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 16px solid black;
}

.arrow-left{
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right:16px solid black;
}

.arrow-down{
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid black;
}

.down{
  bottom: 0;
  left: 9rem;
}

.left{
  top: 7rem;
  left: 0;
}


.right{
  top: 7rem;
  right: 0;
}

.up{
  top: 0;
  left: 9rem;
}

.reset{
  position: relative;
  top: 12rem;
  width: 10rem;
  height: 4rem;
  left: 12rem;
}

#circle{
  position: relative;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background:blue;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="border">

    <div id="circle"></div>

</div>

<div class="sidebar">

    <div class="buttons">
        <button class="button up"  value="up"><span class="arrow-up arrow"></span></button>
        <button class="button down"  value="down"><span class="arrow-down arrow"></span></button>
        <button class="button right"  value="right"><span class="arrow-right arrow"></span></button>
        <button class="button left"  value="left"><span class="arrow-left arrow"></span></button>
    </div>

    <button class="reset">Reset</button>

</div>

- Moran

---

可以使用边距来工作，但始终只设置 marginLeft/Top。使用仅 horizontal 和 vertical 两个值，而不是四个值。当检测到左/上按钮时减少相应的值，在右/下情况下增加相应的值。 - Teemu

Answer 1

您需要对 javascript 代码进行轻微修改：

    (function(){

    var button = document.getElementsByClassName("button");
    var circle = document.getElementById("circle");

    var top=50, left=50, perStep = 2;

    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click',function(e){

            var position = e.currentTarget.value;

            switch(position){
                case "up": top-=perStep; break;
                case "down": top+=perStep; break;
                case "left": left-=perStep; break;
                case "right": left+=perStep; break;
            }

            if(top < 0)
                top = 0;
            if(top > 100)
                top = 100;

            if(left < 0)
                left = 0;
            if(left > 100)
                left = 100;

            circle.style.top = top+'%';
            circle.style.left = left+'%';
        });
    }

}());

不要改变边距，你可以更好地改变顶部和左侧的css属性。

编辑：将if语句更改为switch

编辑2：现在不会超出边框

- Juan Elfers

---

谢谢！现在这个工作了。我也尝试使用 circle.style.top，但它不起作用... - Moran

它能工作，但你需要获取circle.offsetTop和circle.offsetLeft的值，就像我在答案的第二个示例中所做的那样。 - Mi-Creativity

我该如何防止圆形超出边界？ - Moran

就像我之前告诉你的那样，使用CSS中的top和left属性来代替margin。看看这个新修改...我还没有测试过它，所以可能不起作用。请试一下吧。 - Juan Elfers

Answer 2

JS Fiddle

JS:

(function() {
  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");
  var down = 0,
    up = 0,
    left = 0,
    right = 0;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;

      // for bottom and top, use marginTop, but for one increase by 5
      // and for the other decrease by 5
      if (position === "down") {
        down += 5;
        circle.style.marginTop = down + "px";
      }
      if (position == "up") {
        up -= 5;
        circle.style.marginTop = up + 'px';
      }
      // same thing for left and right, use marginLeft, but for one increase by 5
      // and for the other decrease by 5
      if (position == "left") {
        left -= 5;
        circle.style.marginLeft = left + 'px';
      }
      if (position == "right") {
        left += 5;
        circle.style.marginLeft = left + 'px';
      }
    })
  }
}());

---

更新

或者你可以将 marginTop 和 marginLeft 改为移动 top 和 left 的值，如下所示：

JS Fiddle 2

(function() {

  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");


  var posTop = circle.offsetTop,
    posLeft = circle.offsetLeft;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;
      if (position === "down") {
        posTop += 5;
        circle.style.top = posTop + "px";
      }
      if (position == "up") {
        posTop -= 5;
        circle.style.top = posTop + 'px';
      }
      if (position == "left") {
        posLeft -= 5;
        circle.style.left = posLeft + 'px';
      }
      if (position == "right") {
        posLeft += 5;
        circle.style.left = posLeft + 'px';
      }

    })
  }
}());

- Mi-Creativity