如何在我的jquery拼图和放置中间抓取我的拼图瓷砖？ [英] How can I grab my puzzle tiles in my jquery puzzle AND in middle of drop place?
本文介绍了如何在我的jquery拼图和放置中间抓取我的拼图瓷砖？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一个带有可放置和可拖动的Jquery拼图。
我有不同的等级，我现在有2个问题。
首先是我要放下瓷砖的地方没有抓住瓷砖。我希望它抓住瓷砖并将其放置在放置中间。
我试图这样做但是它不起作用
这是我的代码：
I'm making an Jquery puzzle with droppable and draggable.
I have different levels and I have 2 problems now.
The first is that the place where I want to drop the tile doesn't grab the tile. I want it grabs the tile and place it in the middle of the dropplace.
I've tried to do this but it isn't working
This is my code:
<script type="text/javascript">
$(document).ready(function() {
$(".reset").click(function() {
location.reload();
});
$("img").draggable()
$(".droplvl1").droppable({
drop : function(event, ui) {
$(this).addClass("ui-state-highlight").find(".img")
}
});
});
</script>
</head>
<body>
<h1>Jquery Puzzel</h1>
<br>
<a class="Levels" href="Level2.html">Level 2</a>
<a class="Levels" href="Level3.html">Level 3</a>
<a class="Levels" href="Level4.html">Level 4</a>
<a class="Levels" href="Level5.html">Level 5</a>
<br><br><br>
<img id="puzlvl1.1"class="puz1"src="images/lvl1.1.jpg">
<img id="puzlvl1.2"class="puz1"src="images/lvl1.2.jpg">
<img id="puzlvl1.3"class="puz1"src="images/lvl1.3.jpg">
<img id="puzlvl1.4"class="puz1"src="images/lvl1.4.jpg">
<br><br><br>
<div id="KaderLevel1">
<table id="PuzTabel">
<tr>
<td id="puzdrop1.1" data="puzlvl1.1" class= "droplvl1 droppable ui-droppable"></td>
<td id="puzdrop1.2" class= "droplvl1 droppable ui-droppable"></td>
</tr>
<tr>
<td id="puzdrop1.3" class= "droplvl1 droppable ui-droppable"></td>
<td id="puzdrop1.4" class= "droplvl1 droppable ui-droppable"></td>
</tr>
</table>
</div>
<br><br><br>
<button class="reset">
RESET
</button>
<br>
<br>
<br>
<a class="Levels" href="Puzzel.html">Home</a><br>
</body>
</html>
#droppable{
width: 50px;
height:50px;
margin: 0;
}
.droppable{
width:50px;
height: 50px;
background-color: blue;
}
#kader{
width: 300px;
height: 300px;
}
#kader table{
width:270px;
height: 270px;
background-color: blue;
border-collapse: collapse;
border: 0;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
#kader table td{
width:50px;
height: 50px;
background-color: blue;
margin: 0;
padding: 0;
/*position: relative*/
}
#kader table td img {
width: 100%;
height: 100%;
}
#kaderLevel1{
width:110px;
height: 110px;
background-color: blue;
border: 0;
}
#PuzTabel{
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
#kaderLevel1 table td{
width:50px;
height: 50px;
background-color: blue;
margin: 0;
padding: 0;
position: absolute;
}
#kaderLevel1 table td img {
width: 100%;
height: 100%;
}
推荐答案
（document）.ready（function（）{
(document).ready(function() {
（。reset）。click（function（）{
location.reload（ ）;
}）;
(".reset").click(function() { location.reload(); });
（img）。draggable（）
("img").draggable()
这篇关于如何在我的jquery拼图和放置中间抓取我的拼图瓷砖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
