Return divs to starting position

Question

Return divs to starting position

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

At this point, the drag3 always returns the initial position, except when it is placed in drop1 . In the complete game there are 4 drag's and 4 drop's but just 1 of each for the example and to give an understanding how I have this, I think.

What I really want, as I said, is to return all the drag's initial position without refreshing the page (which is what I do in this example) when I click on the restart button.

$("#drag3").draggable({
  revert: true,
  containment: "#fundo-interno"
});

$("#drop1").droppable({
  drop: function(event, ui) {
    if (ui.draggable.attr('id') == 'drag3') {
      $("#drag3").draggable({
        revert: false,
        containment: "#fundo-interno"
      });
      $(this)
        .addClass("alterar1")
        .find("p")
      alert("Muito Bem !");

    } else {
      $(this)
        .find("p")
      alert("Tenta denovo !");
    }
  }
});

#drag3 {
  float: left;
  margin-left: 75px;
  margin-top: 25px;
  background-color: #727170;
  width: 45px;
  height: 45px;
}
#drop1 {
  float: left;
  margin-left: 20px;
  margin-top: 9px;
  width: 210px;
  height: 180px;
  float: left;
  background-position: center;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type="reset" name="recomecar" value="Ok" id="recomecar" onclick="window.location.reload( true );">
<img src="seta.png" width="100px" height="100px">

javascript html div

asked by anonymous 14.04.2015 / 12:39

2 answers

0

Save the position x and y of the initial divs and then, when necessary, set the values of left and top .

17.04.2015 / 01:32

RSS images do not appear on Wordpress CommandButton - Error Calling Method

score 0 · Accepted Answer

If you notice, when you move div using draggable of jQuery UI, the element automatically receives the position as relative, and then its Top and Left positions are named 0. You can use this to your advantage, because automatically the initial position of the element will be when it is in the position Top and Left: 0 . So, to make the element return to its original location, you can simply send the element to the Top and Left: 0 position. For him to come back with an animation, you can use the animate function of jQuery. Example:

// "#reset" é o botão para resetar a posição do elemento
$("#reset").click(function() {
    $("#drag3").animate({
        top:"0",
        left:"0"
    }, 1000);
});

See an example working in JSFiddle: link