Перемещение DIV с JavaScript внутри ограничений BODY

Question

Моя цель - переместить DIV (поле) в пределах BODY с помощью JavaScript. Он состоит из 4 кнопок, каждый из которых перемещает DIV по вертикали и по горизонтали (минус и плюс значения, передаваемые событиями OnClick).

Мой код выглядит следующим образом (он не работает :():

<style> 

#box { 
    z-index: 2; 
    position: absolute; 
    top: 200px; 
    left: 300px; 
    width: 100px; 
    height: 227px; 
    border: none; 
} 

</style> 

---

<script> 

function moveV(i) { 

    var block, vTop, vNum; 

    block = document.getElementById('box').style; 
    vTop = block.top; 
    vNum = parseInt(vTop); 

    vNum += i; 
    block.top = vNum + "px"; 
} 

</script> 

---

<input type="button" id="btn1" class="btn" onClick="moveV(-20);"> 
<input type="button" id="btn2" class="btn" onClick="moveH(-20);"> 
<input type="button" id="btn3" class="btn" onClick="moveV(20);"> 
<input type="button" id="btn4" class="btn" onClick="moveH(20);"> 

<div id="box"></div> 

---

Кроме того, еще одна проблема заключается в том, что я не» я знаю, как остановить его, как только вы достигнете предела тела. Должен ли я помещать его в другой DIV, чтобы границы были «осязаемыми»?

Answer 1

Было бы лучше использовать JQuery, кстати с прямым JavaScript это будет:

• Read the Viewport Height and Width (or like this in jQuery);
• получить объект, а не стиль (block = document.getElementById('box'));
• читать block.offsetTop и block.offsetLeft вместо style.top и style.left;
• перед установкой нового значения, проверьте, что больше 0, и что новое значение PLUS: ширина и высота окна не превышают высоту или ширину видового экрана;
• установить style.top и style.left как вы делаете, добавив «px»;

> Running Demo

Answer 2

вы можете использовать JQuery:

function moveV(i) { 
    $("#box").animate({top:"+="+i+"px"}); 
} 
function moveH(i) { 
    $("#box").animate({left:"+="+i+"px"}); 
} 

это работает.