Question

我需要点击4个按钮之一移动div：left, right, top, bottom

点击每个按钮，我希望div根据点击的按钮移动到left, right, top, bottom。

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

正如您所看到的，每个按钮都有一个事件监听器，它调用一个函数将div移动到所述方向。

然而，这不起作用，我有什么改变让它起作用？

Answer 1

使用而不是将jquery css修饰符添加位置固定到你的css。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用解决方案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>    		 
<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>

您需要为position as absolute指定div container。

元素位置只有两个属性left和top，你需要使用这两个＆amp;基于此计算。

希望这会对你有所帮助。

Answer 3

不使用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>    		 
<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>

Answer 4

改变css：

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

您可以在这里获取更新的jquery代码：

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

如何使用JavaScript移动元素

4 个答案: