I'm trying to create a system that executes a function when i drag a "draggable" div to the "droppable" zone according to each id from the "draggables" div. To do this i'm using jquery with jqueryUI, but i can't figure out a way to get the id from each "draggable" div.
$('#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" >1</div>
<div id="2" >2</div>
<div id="3" >3</div>
<div id="4" >4</div>
</section>
<div id="droppable">
<p>Drop Something Here</p>
</div>
</main>
</body>
</html>
CodePudding user response:
You can try with below code:
drop: function(event,ui){
//var a = $('#draggables').children().attr('id')
alert($(event.toElement).attr("id"));
}
Working code
$('#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" >1</div>
<div id="2" >2</div>
<div id="3" >3</div>
<div id="4" >4</div>
</section>
<div id="droppable">
<p>Drop Something Here</p>
</div>
</main>
</body>
</html>