我正在處理一個 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>uj5u.com熱心網友回復：
您應該將該droppable屬性更改為，data-droppable因為前者是無效屬性。進行更改后，將$.droppable選擇器更改為：.target[data-droppable="true"]。我也用draggable屬性做了這個，但這些不是直接的問題，因為你從來沒有使用過它們。
此外，我分別使用了 jQuery 和 jQuery UI 的 3.3.1 和 1.12.1 版本。這些是通過 cdnjs 提供的最新可用版本。
注意：我還創建了一個名為的 jQuery 插件函式$.fn.centerOnDrop，該函式將可拖動專案置于可放置區域的中心。
(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>uj5u.com熱心網友回復：
考慮以下示例。
$(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,<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>
<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 版本；但這會像我建議的那樣低。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/363372.html
標籤：javascript html 查询 jquery-ui jquery-ui-droppable
上一篇：無法在Java中創建影像檔案