How can i get id from each draggable div when i drop into the droppable div

September 11, 2022

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.

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>

>Solution :

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" 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>