如何在可丢弃方法中选择元素id

Question

我正在学习jQuery并做小项目。我有大盒子和4个小盒子，当我抓住小盒子并把它放在大盒子里时，我想看看什么id有小盒子。alert方法显示未定义。你知道怎么解决这个问题吗？感谢

<span class="box10" id="b">blue</span>  // this is one small box
const quizData = [
{
question : '1. Who created JS?',
a: 'Musk',
b: 'Eich',
c: 'Mask',
d: 'Pask',
correct: 'b'
}, ...
]
loadquiz()

function loadquiz() {
const currentQdata= quizData[currentQuiz]
$('.question').html(`<h5>${currentQdata.question}</h5>`)
$('#a').html(`${currentQdata.a}`)
$('#b').html(`${currentQdata.b}`)
$('#c').html(`${currentQdata.c}`)
$('#d').html(`${currentQdata.d}`)

let box = $('.box10')
box.draggable()

$('.question').droppable({
drop: function(e,ui) {
const a = e.target.dataset.id
alert(a)               // this is showing me undefined
}
})
} 

Answer 1

考虑以下内容。

$(function() {
var quizData = [{
question: '1. Who created JS?',
a: 'Musk',
b: 'Eich',
c: 'Mask',
d: 'Pask',
correct: 'b'
}];
function loadquiz() {
var currentQdata = quizData[0];
$('.question').html("<h5>" + currentQdata.question + "</h5>");
$('#a').html(currentQdata.a);
$('#b').html(currentQdata.b);
$('#c').html(currentQdata.c);
$('#d').html(currentQdata.d);
$('.box10').draggable();
$('.question').droppable({
drop: function(e, ui) {
var dropId = ui.draggable.attr("id");
console.log(dropId);
}
});
}
loadquiz();
});

.question {
border: 1px solid #ccc;
padding-bottom: 2em;
}
.box10 {
padding: .4em;
border: 1px solid black;
width: 10em;
margin: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="question"></div>
<div id="a" class="box10"></div>
<div id="b" class="box10"></div>
<div id="c" class="box10"></div>
<div id="d" class="box10"></div>

Droppable将事件和UI对象传递给回调。请参阅：https://api.jqueryui.com/droppable/#event-下降

drop(event，ui(当接受的可拖动对象被丢弃在可拖动对象上时触发(基于容差选项(。

• ui
• • draggable-表示draggable元素的jQuery对象