我正在嘗試創建一個系統，當我根據“draggables”div 中的每個 id 將“draggable”div 拖到“droppable”區域時執行一個函式。為此，我將 jquery 與 jqueryUI 一起使用，但我無法找到從每個“可拖動”div 獲取 id 的方法。
JSFiddle 直播
$('#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>uj5u.com熱心網友回復：
您可以嘗試使用以下代碼：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511223.html