我正试图创建一个系统，当我拖动一个"可拖动的"；div到"；可丢弃的"；根据来自"；draggables"；要做到这一点，我将jquery与jqueryUI结合使用，但我无法找到从每个"；可拖动的"；分区
JSFiddle Live
$('#draggables').children().draggable({
revert: "invalid"
})
$('#droppable').droppable({
accept: $('#draggables').children(),
drop: function(){
var a = $('#draggables').children().attr('id')
alert(a)
}
})body{
background-color: #111;
color: #555;
}
main{
display: flex;
gap: 40px;
}
#draggables{
display: flex;
flex-direction: column;
gap: 20px;
}
.draggable{
display: flex;
align-items: center;
justify-content: center;
background: #151515;
border: 1px solid #222;
width: 100px;
height: 100px;
cursor: move;
}
#droppable{
display: flex;
align-items: center;
justify-content: center;
background: #090909;
border: 1px solid #222;
width: 200px;
height: 200px;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<main>
<section id="draggables">
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>
<div id="3" class="draggable">3</div>
<div id="4" class="draggable">4</div>
</section>
<div id="droppable">
<p>Drop Something Here</p>
</div>
</main>
</body>
</html>您可以尝试使用以下代码：
drop: function(event,ui){
//var a = $('#draggables').children().attr('id')
alert($(event.toElement).attr("id"));
}
工作代码
$('#draggables').children().draggable({
revert: "invalid"
})
$('#droppable').droppable({
accept: $('#draggables').children(),
drop: function(event,ui){
//var a = $('#draggables').children().attr('id')
alert($(event.toElement).attr("id"));
}
})body{
background-color: #111;
color: #555;
}
main{
display: flex;
gap: 40px;
}
#draggables{
display: flex;
flex-direction: column;
gap: 20px;
}
.draggable{
display: flex;
align-items: center;
justify-content: center;
background: #151515;
border: 1px solid #222;
width: 100px;
height: 100px;
cursor: move;
}
#droppable{
display: flex;
align-items: center;
justify-content: center;
background: #090909;
border: 1px solid #222;
width: 200px;
height: 200px;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<main>
<section id="draggables">
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>
<div id="3" class="draggable">3</div>
<div id="4" class="draggable">4</div>
</section>
<div id="droppable">
<p>Drop Something Here</p>
</div>
</main>
</body>
</html>