我正在创建一个 HTML 小游戏，您可以在其中将不同的元素拖放到预定义的位置。这是一款游戏，您可以在其中使用不同的食材制作汉堡。现在，我想要一种在有人拖动它们时将不同的 div(你拖动带有图像的 div)向后移动的方法。所以他们不能重叠，总是回到同一个地方。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='dragdrop.js'></script>
<title>Restaurant simulator</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div class="container">
<style>
body {
background: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#draggable,
#draggable2,
#draggable3 {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
background: white;
border: 2px solid green;
background-size: contain;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
.dropped {
background: white;
color: black;
}
</style>
<script>
$(function() {
$("#draggable").draggable();
$("#draggable2").draggable();
$("#draggable3").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.addClass("dropped")
.find("p")
.html("Dropped!");
}
});
});
</script>
<div class="demo">
<div id="draggable" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')">
<!-- <p>Drag me to my target</p> -->
</div>
<div id="draggable2" class="ui-widget-content" style="background-image: url('/images/food/Meat.png')"></div>
<div id="draggable3" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')"></div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
<!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
</div>
<!-- End demo-description -->
</div>
</body>
</html>
最佳答案
你必须使用'revert'和draggable来恢复div的位置。
$(function() { $("#draggable").draggable({ revert : function(event, ui) { // on older version of jQuery use "draggable" // $(this).data("draggable") // on 2.x versions of jQuery use "ui-draggable" // $(this).data("ui-draggable") $(this).data("uiDraggable").originalPosition = { top : 0, left : 0 }; // return boolean return !event; // that evaluate like this: // return event !== false ? false : true; } }); $("#droppable").droppable(); });
关于jquery - HTML - 拖放 - 如果没有放在特定位置，则将元素移回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43726443/