내가 자바 스크립트

Question

로 요소를 이동할 수 있습니다 어떻게 4 개 개의 버튼 중 하나를 클릭에 DIV를 이동해야합니다.

각 버튼 사업부를 이동하는 함수를 호출하는 이벤트 리스너를 가지고 볼 수 있듯이

function left(){ 
 
    $("#rstSearch").position().left = $("#rstSearch").position().left + 10; 
 
} 
 

 
function right(){ 
 
    $("#rstSearch").position().right = $("#rstSearch").position().right + 10; 
 
} 
 

 
function top2(){ 
 
    $("#rstSearch").position().top = $("#rstSearch").position().top + 10; 
 
} 
 

 
function bottom(){ 
 
    $("#rstSearch").position().bottom = $("#rstSearch").position().bottom + 10; 
 
}

#rstSearch { 
 
    background-color: blue; 
 
    width:50px; 
 
    height:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="btnLeft" onclick="left();" class="button_air-medium"> left</button>  \t \t 
 
<button type="button" id="btnRight" onclick="right();" class="button_air-medium">right</button> 
 
<button type="button" id="btnTop" onclick="top2();" class="button_air-medium">top</button> 
 
<button type="button" id="btnBottom" onclick="bottom();" class="button_air-medium">bottom</button> 
 

 

 

 

 
<div id="rstSearch" class="exosphere" ></div>

방향을 특징으로하는.

그러나 이것은 작동하지 않습니다. 변경하려면 어떻게해야합니까? 작은

Answer 1

당신은 해결책 당신은 div container에 position as absolute을 지정해야 https://jsfiddle.net/o2gxgz9r/14501/

function left(){ 
 
    $("#rstSearch").css('left',$("#rstSearch").position().left - 10); 
 
} 
 

 
function right(){ 
 
    $("#rstSearch").css('left', $("#rstSearch").position().left + 10); 
 
} 
 

 
function top2(){ 
 
    $("#rstSearch").css('top', $("#rstSearch").position().top - 10); 
 
} 
 

 
function bottom(){ 
 
    $("#rstSearch").css('top', $("#rstSearch").position().top + 10); 
 
}

#rstSearch { 
 
    background-color: blue; 
 
    width:50px; 
 
    height:50px; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="btnLeft" onclick="left();" class="button_air-medium"> left</button>  \t \t 
 
<button type="button" id="btnRight" onclick="right();" class="button_air-medium">right</button> 
 
<button type="button" id="btnTop" onclick="top2();" class="button_air-medium">top</button> 
 
<button type="button" id="btnBottom" onclick="bottom();" class="button_air-medium">bottom</button> 
 

 
<div id="rstSearch" class="exosphere" ></div>

과 함께 할 것입니다.

요소의 위치 만이 재산 left 및 top을 가지고, 당신은 그 근거로이 두 & 계산을 사용해야합니다.

희망이 도움이 될 것입니다.

Answer 2

변경 CSS : 업데이트 된 jQuery 코드 갈 여기

#rstSearch { 
    background-color: blue; 
    width:50px; 
    height:50px; 
    position: absolute; // added this 
} 

:

function left(){ 
    $("#rstSearch").attr('style','margin-right:10px;'); 
} 

function right(){ 
    $("#rstSearch").attr('style','margin-left:10px;'); 
} 

function top2(){ 
    $("#rstSearch").attr('style','margin-bottom:10px;');   
} 

function bottom(){ 
    $("#rstSearch").attr('style','margin-top:10px;'); 
} 

확인 대신 위치의 JSFIDDLE

Answer 3

사용은 JQuery와 CSS의 수정 위치하여 CSS에 고정 추가 할 . 여기

function left(){ 
 
    $("#rstSearch").css("left", $("#rstSearch").position().left -= 10); 
 
} 
 

 
function right(){ 
 
    $("#rstSearch").css("left", $("#rstSearch").position().left += 10); 
 
} 
 

 
function top2(){ 
 
    $("#rstSearch").css("top", $("#rstSearch").position().top -= 10); 
 
} 
 

 
function bottom(){ 
 
    $("#rstSearch").css("top", $("#rstSearch").position().top += 10); 
 
}

#rstSearch { 
 
    background-color: blue; 
 
    width:50px; 
 
    height:50px; 
 
    position: fixed; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="btnLeft" onclick="left();" class="button_air-medium"> left</button>  \t \t 
 
<button type="button" id="btnRight" onclick="right();" class="button_air-medium">right</button> 
 
<button type="button" id="btnTop" onclick="top2();" class="button_air-medium">top</button> 
 
<button type="button" id="btnBottom" onclick="bottom();" class="button_air-medium">bottom</button> 
 

 
<div id="rstSearch" class="exosphere" ></div>

Answer 4

jQuery를 사용하지 않고 x 및 y 축 이동을위한 두 가지 기능 만 사용합니다.

var rstSearch = document.getElementById('rstSearch'); 
 

 
function horizontal(value) { 
 
    rstSearch.style.left = (parseInt(rstSearch.style.left) || 0) + value + 'px'; 
 
} 
 

 
function vertical(value) { 
 
    rstSearch.style.top = (parseInt(rstSearch.style.top) || 0) + value + 'px'; 
 
}

#rstSearch { 
 
    background-color: blue; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
}

<button type="button" id="btnLeft" onclick="horizontal(-10);" class="button_air-medium">left</button>  \t \t 
 
<button type="button" id="btnRight" onclick="horizontal(10);" class="button_air-medium">right</button> 
 
<button type="button" id="btnTop" onclick="vertical(-10);" class="button_air-medium">top</button> 
 
<button type="button" id="btnBottom" onclick="vertical(10);" class="button_air-medium">bottom</button> 
 

 
<div id="rstSearch" class="exosphere"></div>