使用 javascript 将项目移回原位

Question

我做了一个简单的游戏，你必须匹配正确的数字。我想做一些东西，当你把它拖到错误的地方时，它会让一个图形回到原来的位置。

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

例如：如果您将正方形拖到圆上，它现在会提示“错误的选择！”。但我想做一些让方块回到原来位置（或只是一个位置）的东西。谢谢！

Answer 1

JQuery 可拖动编辑您拖动的元素的样式。因此，如果您删除样式并放回可以拖动的强制性 css 元素（位置和 z-index），这将解决您的问题！

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

更新我已经升级了这种艺术的和平，我想这就是你的意思！我已经删除了捕捉模式，所以 jquery UI 不再尝试将可拖动项目放入可放置项目中！因为我们自己可以轻松做到这一点。当您释放鼠标按钮并且条件为真时，我们会记住放置区的样式并将其赋予我们的可拖动项，当我们为可拖动项提供高于放置区的 z-index 和绝对位置时，他将站在他的顶部 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>

使用 javascript 将项目移回原位

Move item back to its place with javascript

html

javascript

css

drag-and-drop

draggable