Search code examples
javascripthtmlcssdrag-and-dropdraggable

Move item back to its place with javascript

i made a simple game where you have to match the right figures. I want to make something that will get a figure back to its original place when you drag it to the wrong place.

$(document).ready(function() {
  $(".selectable").draggable({
    addClasses: false,
    snap: true,
    stack: ".destination",
    scroll: false
  });

  $(".destination").draggable({
    snapMode: "inner"
  });

  $(".destination").draggable("disable");

  $(".destination").droppable({
    drop: function(event, ui) {
      var selectedShape = ui.draggable.attr("id");
      var dropZone = $(this).attr("id");
      dropZone = dropZone.replace("inside", "");
      if (selectedShape == dropZone) {
        $("#" + selectedShape).draggable("disable");
        checkShapeStatus();
      } else {
        //here is where i need something that will move the item back to its place
        alert("Wrong choice!");
      }
    }
  });
});

function checkShapeStatus() {
  var counter = 0;
  $(".selectable").each(function() {
    var $thisId = $(this);
    var booleanValue = $thisId.draggable('option', 'disabled');
    if (booleanValue) {
      counter = counter + 1;
    } else {

    }

    if (counter == 4) {
      win.play();
    }

  })
}
#square {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 8%;
  z-index: 1;
}

#circle {
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  z-index: 2;
}

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
  z-index: 3;
}

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  z-index: 4;
}

#squareinside {
  width: 100px;
  height: 100px;
  background: gray;
}

#circleinside {
  width: 100px;
  height: 100px;
  background: gray;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

#triangle-upinside {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid gray;
}

#pacmaninside {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid gray;
  border-left: 60px solid gray;
  border-bottom: 60px solid gray;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

body {
  background-color: bisque;
  overflow: hidden;
}

#centerText {
  font-family: 'Rock Salt', cursive;
  font-size: xx-large;
  style="width:100%;
 height: 100%;
  z-index: 0;
  text-align: center;
  margin-top: 2%;
}

.grid-1 {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shape Matching</title>
  <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <link href="style.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body>

  <div class="grid-1">
    <div id="pacmaninside" class="destination"></div>
    <div id="triangle-upinside" class="destination"></div>
    <div id="circleinside" class="destination"></div>
    <div id="squareinside" class="destination"></div>
  </div>

  <div class="grid-2">
    <div id="square" class="selectable"></div>
    <div id="circle" class="selectable"></div>
    <div id="triangle-up" class="selectable"></div>
    <div id="pacman" class="selectable"></div>
  </div>

</body>

</html>

So for example: if you drag the square to the circle it now alerts "Wrong choice!". But i want to make something where the square moves back to its original position (or just a position). Thanks!

Solution

  • JQuery draggable edit the style of the element you are dragging with. So if you remove the style and put back the mandatory css elements (position and z-index) that you can drag with, this will solve your problem!

    $(document).ready(function() {
  $(".selectable").draggable({
    addClasses: false,
    snap: true,
    stack: ".destination",
    scroll: false
  });

  $(".destination").draggable({
    snapMode: "inner"
  });

  $(".destination").draggable("disable");

  $(".destination").droppable({
    drop: function(event, ui) {
      var selectedShape = ui.draggable.attr("id");
      var dropZone = $(this).attr("id");
      dropZone = dropZone;
      if (selectedShape == dropZone.replace("inside", "")) {
        $("#" + selectedShape).draggable("disable");
        checkShapeStatus();
      } else {
        //here is where i need something that will move the item back to its place
        let style = 
        {
        position: 'relative',
        zIndex: '4'
        }
        $("#" + selectedShape).removeAttr('style');
        $("#" + selectedShape).css(style);
      }
    }
  });
});

function checkShapeStatus() {
  var counter = 0;
  $(".selectable").each(function() {
    var $thisId = $(this);
    var booleanValue = $thisId.draggable('option', 'disabled');
    if (booleanValue) {
      counter = counter + 1;
    } else {

    }

    if (counter == 4) {
      win.play();
    }

  })
}
    #square {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 8%;
  z-index:1;
}

#circle {
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  z-index:2;
}

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
  z-index:3;
}

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  z-index:4;
}

#squareinside {
  width: 100px;
  height: 100px;
  background: gray;
}

#circleinside {
  width: 100px;
  height: 100px;
  background: gray;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

#triangle-upinside {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid gray;
}

#pacmaninside {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid gray;
  border-left: 60px solid gray;
  border-bottom: 60px solid gray;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

body {
  background-color:bisque;
    overflow:hidden;
}

#centerText {
 font-family: 'Rock Salt', cursive;
 font-size:xx-large;
 style="width:100%;
 height:100%;
 z-index:0;
 text-align: center;
 margin-top: 2%;
}


.grid-1 {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Shape Matching</title>
    <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <link href="style.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body>

  <div class="grid-1">
  <div id="pacmaninside" class="destination"></div>
  <div id="triangle-upinside" class="destination"></div>
  <div id="circleinside" class="destination"></div>
  <div id="squareinside" class="destination"></div>
  </div>

  <div class="grid-2">
  <div id="square" class="selectable"></div>
  <div id="circle" class="selectable"></div>
  <div id="triangle-up" class="selectable"></div>
  <div id="pacman" class="selectable"></div>
</div>

</body>

</html>
    Update I have upgrade this peace of art, and i guess this is wat you meant! I have deleted the snap mode, so jquery UI isn't trying to fit your draggable item in a droppable item anymore! Because we can do that easily ourselves. When you release the mouse button and the conditions are true, we remember the style from the dropzone and give that to our draggable item, when we give our draggable item a z-index higher then the dropzone and a position absolute, he will stand on top of his parent.

    $(document).ready(function() {
  $(".selectable").draggable({
    addClasses: false,
    stack: ".destination",
    scroll: false
  });

  $(".destination").droppable({
  
    drop: function(event, ui) {
    
      var selectedShape = ui.draggable.attr("id");
      
      var dropZone = $(this).attr("id");
      
      dropZone = dropZone;
      
      if (selectedShape == dropZone.replace("inside", "")) {
      
        $("#" + selectedShape).draggable("disable");
        
        checkShapeStatus();        
        
        let style = {
        
          top: $('#' + dropZone).offset().top,
          left: $('#' + dropZone).offset().left,
          position: 'absolute',
          marginTop: 0,
          zIndex: '4'
          
        }
        
        $("#" + selectedShape).removeAttr('style');
        
        $("#" + selectedShape).css(style);
        
      } else {
        let style = 
        {
        position: 'relative',
        zIndex: '4'
        }
        
        $("#" + selectedShape).removeAttr('style');
        
        $("#" + selectedShape).css(style);
        
      }
    }
  });
});

function checkShapeStatus() {
  var counter = 0;
  $(".selectable").each(function() {
    var $thisId = $(this);
    var booleanValue = $thisId.draggable('option', 'disabled');
    if (booleanValue) {
      counter = counter + 1;
    } else {

    }

    //if (counter == 4) {
      //win.play();
    //}

  })
}
    #square {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 8%;
  z-index:1;
}

#circle {
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  z-index:2;
}

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
  z-index:3;
}

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  z-index:4;
}

#squareinside {
  width: 100px;
  height: 100px;
  background: gray;
}

#circleinside {
  width: 100px;
  height: 100px;
  background: gray;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

#triangle-upinside {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid gray;
}

#pacmaninside {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid gray;
  border-left: 60px solid gray;
  border-bottom: 60px solid gray;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

body {
  background-color:bisque;
    overflow:hidden;
}

#centerText {
 font-family: 'Rock Salt', cursive;
 font-size:xx-large;
 style="width:100%;
 height:100%;
 z-index:0;
 text-align: center;
 margin-top: 2%;
}


.grid-1 {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Shape Matching</title>
    <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <link href="style.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body>

  <div class="grid-1">
  <div id="pacmaninside" class="destination"></div>
  <div id="triangle-upinside" class="destination"></div>
  <div id="circleinside" class="destination"></div>
  <div id="squareinside" class="destination"></div>
  </div>

  <div class="grid-2">
  <div id="square" class="selectable"></div>
  <div id="circle" class="selectable"></div>
  <div id="triangle-up" class="selectable"></div>
  <div id="pacman" class="selectable"></div>
</div>

</body>

</html>