Как переместить круг в DIV при нажатии кнопки вверх \ вниз \ влево \ вправо

Question

Мне нужно, чтобы переместить круг, нажав на кнопки. и круг не должен уходить далеко от границы.

Это работает только для кнопки влево и вправо, но это не очень хороший способ использовать маржу. есть способ изменить положение относительно левого \ right \ top \ вниз, а не поля?

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

Answer 1

Вы должны сделать небольшие изменения в свой код яваскрипта:

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

редактировать: изменены если заявления для переключателя

edit2: Теперь не выходя из границ

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'; 
     } 
    }) 
    } 
}()); 

---

UPDATE

В качестве альтернативы вы можете перемещать top и left и значения вместо marginTop и marginLeft как это:

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'; 
     } 

    }) 
    } 
}());