我正在使用 jQuery UI 的可拖放功能开发一个 Web 应用程序（通过 python Flask 服务器）。我有可拖动的元素，当放入可放置区域时应该将它们组合起来。但是，我遇到了一个问题，即 drop 事件处理程序中未定义 firstElement 变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Combination Game</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="elements-container">
<div class="draggable" id="air" draggable="true">Air</div>
<div class="draggable" id="earth" draggable="true">Earth</div>
<div class="draggable" id="fire" draggable="true">Fire</div>
<div class="draggable" id="water" draggable="true">Water</div>
</div>
<div id="game-area">
<div id="result"></div>
</div>
<script>
$(function() {
let firstElement = null;
$(".draggable").draggable({
helper: "clone",
start: function(event, ui) {
$(this).css("opacity", "0.5");
},
stop: function(event, ui) {
$(this).css("opacity", "1");
}
});
$("#game-area").droppable({
accept: ".draggable",
hoverClass: "dragover",
drop: function(event, ui) {
const droppedElement = ui.helper.attr('id');
console.log("Dropped element ID:", droppedElement); // Debug log
if (!droppedElement) {
console.error("Dropped element has no ID");
return;
}
if (firstElement) {
const element1 = firstElement;
const element2 = droppedElement;
console.log("Combining elements:", element1, element2); // Debug log
// Perform AJAX call here
// $.ajax({ ... });
firstElement = null;
} else {
firstElement = droppedElement;
$("#result").text(`First element selected: ${firstElement}`);
console.log("First element set to:", firstElement); // Debug log
}
}
});
});
</script>
</body>
</html>
问题： 当我拖放元素时，firstElement 变量显示为未定义。我已经验证了 HTML 中的 ID 设置正确，并且 jQuery UI 可拖放设置似乎正确。
采取的故障排除步骤：
检查 HTML ID 的一致性。 已验证在放置处理程序中是否正确设置了firstElement。 添加了调试日志以检查变量值。
为什么firstElement未定义，如何解决这个问题？
如果它与我正在使用的AI API或Python有任何关系，我将给出Python代码。
在您的代码中，firstElement 在 drop 事件中被正确设置，但是当您放置元素时， ui.helper 可能没有预期的 id。确保 id 属性在 HTML 中正确设置，并且 ui.helper 在删除时具有该属性。
要修复此问题，您应该检查 ui.helper 是否正确获取 id：
const droppedElement = ui.helper.attr('id');
确保当您设置firstElement时，它具有预期的ID：
firstElement = droppedElement;
因此，请验证拖放元素时是否正确设置和使用了 ID。