【发布时间】：2021-09-14 13:52:24
【问题描述】：
我正在开发一个 HTML/jQuery DnD 项目。我想要可拖动的图像是这样，但目标不接受它们。即使可以放置，应该接受图像的 td 元素也不接受任何内容。
我应该最少使用哪个版本的 jQuery 和 jQueryUI？我还忘记/做错了什么？ TIA 为您解答。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tierspiel</title>
<meta name="author" content="Freya Bremer">
<style>
body {
display: block;
}
.target {
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
empty-cells: show;
border-collapse: separate;
border-spacing: 1 em;
}
table {
align: center;
}
td img {
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
}
tr {
margin-right: 1em;
margin-top: 1em;
}
th {
color: #b00000;
font-weight: bold;
margin-right: 1em;
margin-top: 1em;
text-align: center;
}
[draggable=true] {
cursor: grab;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
init();
function init() {
$(".tier").draggable();
console.log("Tier draggable");
$(".target").droppable({
accept: ".tier",
tolerance: "touch",
drop: checkclass
});
console.log("Target droppable");
}
function checkclass() {
console.log("Checkclass läuft");
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<p>Liebe Schüler,<br> Ihr kennt Euch ja schon mit Tieren aus und habt auch schon gelernt, daß man Tiere in Klassen einteilt.<br> Damit kommen wir zu einem kleinen Spiel.<br> Unten seht Ihr Bilder von einigen Tieren und auch die Klassen, zu denen diese
Tiere gehören.<br> Ihr bitte nehmt die Bilder der Tiere in die Hand und zieht sie in die Klasse, <br> wo Ihr wißt, daß sie dazu gehören.<br> Es gibt für Säugetiere, Amphibien und Reptilien jeweils 3 dazu passende Tiere.<br> Ihr schafft das sicher
ganz alleine, aber wenn etwas zu schwierig ist helfen Euch Eure Lehrer sicher gerne.<br> Fangen wir also an...
</p>
<p>Hier kommen unsere Tiere:</p>
<table align="center">
<tr align="center">
<td><img src="tier1.jpg" draggable="true" class="tier"></td>
<td><img src="tier2.jpg" draggable="true" class="tier"></td>
<td><img src="tier3.jpg" draggable="true" class="tier"></td>
<tr align="center">
<td><img src="tier4.jpg" draggable="true" class="tier"></td>
<td><img src="tier5.jpg" draggable="true" class="tier"></td>
<td><img src="tier6.jpg" draggable="true" class="tier"></td>
</tr>
<tr align="center">
<td><img src="tier7.jpg" draggable="true" class="tier"></td>
<td><img src="tier8.jpg" draggable="true" class="tier"></td>
<td><img src="tier9.jpg" draggable="true" class="tier"></td>
</tr>
</table>
<p>Die Klassen brauchen wir auch noch. Hier sind sie.</p>
<table align="center">
<tr align="center">
<th align="center">Säugetiere</th>
<th align="center">Amphibien</th>
<th align="center">Reptilien</th>
</tr>
<tr>
<td class="target" droppable="true"></td>
<td class="target" droppable="true"></td>
<td class="target" droppable="true"></td>
</tr>
<tr>
<td class="target"></td>
<td class="target"></td>
<td class="target"></td>
</tr>
<tr>
<td class="target"></td>
<td class="target"></td>
<td class="target"></td>
</tr>
</table>
</body>
</html>【问题讨论】：
-
另请注意，您使用的 jQuery 和 jQueryUI 版本已经过时。事实上，他们都超过10岁！将 jQuery 更新到 3.6 版，将 jQueryUI 更新到 1.12.1。请注意，这不会直接影响您的问题，但会解决您可能遇到的任何性能和安全问题。
标签： javascript html jquery jquery-ui jquery-ui-droppable