JQuery Droppable 不接受可拖动项目
Posted
技术标签:
【中文标题】JQuery Droppable 不接受可拖动项目【英文标题】：JQuery Droppable does not accept draggable items 【发布时间】：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。请注意，这不会直接影响您的问题，但会解决您可能遇到的任何性能和安全问题。 【参考方案1】：您应该将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>【讨论】：
我已将您的代码 1 对 1 复制到我的项目中，虽然这里的 code-sn-p 运行良好，但问题仍然存在于我的项目中。可删除代码的 tds 仍然不接受任何东西。我正在使用 Firefox、Chrome 和 MS Edge 浏览器，但它们都不能正常工作。我控制并重读它如此频繁，以至于我的眼睛开始流泪...... @Swordswoman69 如果你注意到了，我修改了 HTML，所以请考虑到这一点。【参考方案2】：考虑以下示例。
$(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 版本；然而，这将与我建议的一样低。
【讨论】：
这正是我想要的。非常感谢你！只做了非常细微的改变（将容差“触摸”更改为“指针”即可完全按照我的意愿进行操作。非常感谢您。以上是关于JQuery Droppable 不接受可拖动项目的主要内容，如果未能解决你的问题，请参考以下文章
jQuery/jQueryUI Droppable 采用 Draggable 的形式
jQuery draggable : 只能在一个 droppable 上拖动
Fullcalendar：即使 fullcalendar 接受 drop，可拖动对象也将 fullcalendar 拒绝为 droppable