How to properly move an element with the control buttons using JQuery?-CodePudding

I want to create the movement buttons for some text to move it around the page in four directions. However when I press some of them more than once, they stop working. I need them to move exactly with 100px.

$("#up").click(function() {
  $("#text").css("bottom", " =100px")
})

$("#left").click(function() {
  $("#text").css("right", " =100px")
})

$("#down").click(function() {
  $("#text").css("top", " =100px")
})

$("#right").click(function() {
  $("#text").css("left", " =100px")
})

.controls {
  position: absolute;
  display: flex;
}

.text {
  position: relative;
  bottom: 0;
}

<div  style="text-align: center;" id="text">
  Hello world
</div>

<br>
<br>

<div >
  <button id="left">left</button>
  <button id="down">down</button>
  <button id="right">right</button>
  <button id="up">up</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

The issue is that you're using top, bottom, left AND right positions. Pick either left OR right, and top OR bottom -- like an x axis and a y axis, not all 4 values. Once you set left AND right on an element, the browser is going to try to resize the element to have the left of the element at the defined value, and the right at its defined value. At that point the element will stop moving.

Just go with top and left. When you click the left button, subtract from the left position, when you click right it will add to the left position. Same for up/down, add and subtract from the top position.

See the adjusted example below:

$("#up").click(function() {
  $("#text").css("top", "-=100px")
})

$("#left").click(function() {
  $("#text").css("left", "-=100px")
})

$("#down").click(function() {
  $("#text").css("top", " =100px")
})

$("#right").click(function() {
  $("#text").css("left", " =100px")
})

.controls {
  position: absolute;
  display: flex;
}

.text {
  position: relative;
  bottom: 0;
}

<div  style="text-align: center;" id="text">
  Hello world
</div>

<br>
<br>

<div >
  <button id="left">left</button>
  <button id="down">down</button>
  <button id="right">right</button>
  <button id="up">up</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

When you click a button it puts inline styling on the element. When you then click another button it puts more styling on the element. That subsequent styling doesn't replace the existing styling if the property doesn't match. It adds to it. You'll need to deal with that.

One strategy is to negate the opposing property, as I've done here. A more elegant solution is to just pick one direction on each axis, as brobert7 has done.

Protip: Don't use line breaks for layout. That's not their purpose. Use margin or padding.

$("#up").click(function() {
  $("#text").css({
    bottom: " =100px",
    top: 'auto'
  })
})

$("#left").click(function() {
  $("#text").css({
    right: " =100px",
    left: 'auto'
  })
})

$("#down").click(function() {
  $("#text").css({
    top: " =100px",
    bottom: 'auto'
  })
})

$("#right").click(function() {
  $("#text").css({
    left: " =100px",
    right: 'auto'
  })
})

.controls {
  margin-top: 2rem;
  display: flex;
}

.text {
  position: relative;
}

<div  style="text-align: center;" id="text">
  Hello world
</div>

<div >
  <button id="left">left</button>
  <button id="down">down</button>
  <button id="right">right</button>
  <button id="up">up</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>