JSFiddle - React, Tailwind, and code Playground

by joaopcos

HTML

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

CSS

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;
  }

JavaScript

$('#draggables').children().draggable({
	revert: "invalid"
})
$('#droppable').droppable({
	accept: $('#draggables').children(),
	drop: function(){
		var a = $('#draggables').children().attr('id')
		alert(a)
	}
})