JSFiddle - React, Tailwind, and code Playground

by 9edge

HTML

<html>
  <head>
  </head>
  <body>
    <div class="draggable" id="drag1">1</div>
    <div class="draggable" id="drag2">2</div>
    <div class="draggable" id="drag3">3</div>
    <table border="1">
      <tr>
        <td class="droppable">&nbsp;</td>
        <td class="droppable">&nbsp;</td>
      </tr>
      <tr>
        <td class="droppable">&nbsp;</td>
        <td class="droppable">&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

CSS

#drag1 {background-color: #ffff00;}
      #drag2 {background-color: #ff00ff;}
      #drag3 {background-color: #00ffff;}
      .draggable {
        width: 50px;
        Height: 50px;
        margin: 5px;
        border: solid 1px #000000;
      }
      table {
        width: 500px;
      }
      tr {
        height: 100px;
}.droppable{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

JavaScript

$(function() {
        $(".draggable").draggable();   // selecteer de selector van elementen die kunnen "gedragd" worden
        $(".droppable").droppable({    // selecteer de selector van elementen waar men in mag "droppen"
          drop: onDrop                 // wanneer iets gedropt is, voeren we volgende functie uit
        });
      });

      function onDrop( event, ui ) {
        var dropElement = this;
        var dragElement = ui.draggable;
        // laat ons, als voorbeeld, de background van het drop element veranderen in de background van het drag element
        $(dropElement).css(
          'background-color', 
          $(dragElement).css('background-color')
        );
      }