问题描述
我正在处理一个 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>
解决方法
您应该将 droppable
属性更改为 data-droppable
,因为前者是无效属性。进行更改后,将 $.droppable
选择器更改为:.target[data-droppable="true"]
。我也使用 draggable
属性进行了此操作,但这些不是直接问题,因为您从未使用过它们。
此外,我分别使用了 jQuery 和 jQuery UI 的 3.3.1 和 1.12.1 版本。这些是通过 cdnjs 提供的最新可用版本。
注意:我还创建了一个名为 $.fn.centerOnDrop
的 jQuery 插件函数,它将可拖动项目置于可放置区域的中心。
(function($) {
$.fn.centerOnDrop = function(ui) {
ui.draggable.position({
my: 'center',at: 'center',of: this,using: function(pos) {
$(this).animate(pos,200,'linear');
}
});
};
})(jQuery);
init();
function init() {
$('.tier[data-draggable="true"]').draggable();
console.log('Tier draggable');
$('.target[data-droppable="true"]').droppable({
accept: '.tier',tolerance: 'touch',drop: checkClass
});
console.log('Target droppable');
}
function checkClass(event,ui) {
console.log('checkClass is running');
$(this).centerOnDrop(ui);
}
body {
display: block;
color: #000000;
background: #FFFFFF;
}
a,a:visited,a:active {
color: #FF0000;
}
.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<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="https://via.placeholder.com/150?text=Tier+1" data-draggable="true" class="tier"></td>
<td><img src="https://via.placeholder.com/150?text=Tier+2" data-draggable="true" class="tier"></td>
<td><img src="https://via.placeholder.com/150?text=Tier+3" data-draggable="true" class="tier"></td>
</tr>
<tr align="center">
<td><img src="https://via.placeholder.com/150?text=Tier+4" data-draggable="true" class="tier"></td>
<td><img src="https://via.placeholder.com/150?text=Tier+5" data-draggable="true" class="tier"></td>
<td><img src="https://via.placeholder.com/150?text=Tier+6" data-draggable="true" class="tier"></td>
</tr>
<tr align="center">
<td><img src="https://via.placeholder.com/150?text=Tier+7" data-draggable="true" class="tier"></td>
<td><img src="https://via.placeholder.com/150?text=Tier+8" data-draggable="true" class="tier"></td>
<td><img src="https://via.placeholder.com/150?text=Tier+9" data-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">Mammals</th>
<th align="center">Amphibians</th>
<th align="center">Reptiles</th>
</tr>
<tr>
<td class="target" data-droppable="true"></td>
<td class="target" data-droppable="true"></td>
<td class="target" data-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>
考虑以下示例。
$(function() {
$(".tier").draggable({
cursor: "grab"
});
$(".target.droppable").droppable({
accept: ".tier",tolerance: "touch",drop: function(evt,ui) {
ui.draggable.attr("style","").appendTo(this);
}
});
});
body {
display: block;
color: #000;
background-color: #fff;
}
.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;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Liebe Schüler,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>
<tr>
<td><img src="tier1.jpg" class="tier"></td>
<td><img src="tier2.jpg" class="tier"></td>
<td><img src="tier3.jpg" class="tier"></td>
</tr>
<tr>
<td><img src="tier4.jpg" class="tier"></td>
<td><img src="tier5.jpg" class="tier"></td>
<td><img src="tier6.jpg" class="tier"></td>
</tr>
<tr>
<td><img src="tier7.jpg" class="tier"></td>
<td><img src="tier8.jpg" class="tier"></td>
<td><img src="tier9.jpg" 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"></td>
<td class="target droppable"></td>
<td class="target droppable"></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>
Draggable 将样式应用到元素。通常最好在将其附加到 Drop 目标之前将其剥离。
关于Demo,请参见https://jqueryui.com/droppable/#accepted-elements 您可以在这里看到使用的版本。我建议使用更现代的 jQuery 版本;但这会像我建议的那样低。