javascript - 使用 javascript 将项目移回原位
问题描述
我做了一个简单的游戏,你必须匹配正确的数字。我想做一些东西,当你把它拖到错误的地方时,它会回到原来的地方。
$(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>
例如:如果你将方块拖到圆圈上,它现在会提示“错误的选择!”。但我想做一些正方形移回其原始位置(或只是一个位置)的东西。谢谢!
解决方案
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>
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 - 在窗口重新加载时重置状态 redux
- python - 如何使用多个显卡运行 pytorch?
- javascript - 如何将 Hotjar 代码插入 laravel 项目?
- angular - 使标题项充当链接
- javascript - 是否有可能使用 angula7/angular 材料检测输入文本的语言?
- laravel - Laravel 失败并显示错误消息:致命错误:未捕获的 ReflectionException:类 App\Http\Kernel 不存在
- c# - TCP / IP客户端服务器通过不同网络进行通信C#
- python - Python:PDF:如何读取带有单选按钮的表单
- c# - 如何为不可见的日期文本框添加值
- vue.js - vue-router TypeError:“在未实现接口 HTMLFormElement 的对象上调用了‘set name’。”