JSFiddle - React, Tailwind, and code Playground

by Kyle Mitofsky

HTML

<div id="draggable">
    <div id="" class="draggable2">
        <p>Test1</p>
    </div>
    <br/>
    <div id="" class="draggable2">
        <p>Test2</p>
    </div>
    <br/>
    <div id="" class="draggable2">
        <p>Test3</p>
    </div>
    <br/>
    <div id="" class="draggable2">
        <p>Test4</p>
    </div>
    <br/>
    <div id="" class="draggable2">
        <p>Test5</p>
    </div>
    <br/>
    <div id="" class="draggable2">
        <p>Test6</p>
    </div>
    <br/>
</div>
<div id="droppable" class="" style="">
    <p>Drop here</p>
</div>

CSS

.draggable2 {
      width: 100px;
      height: 30px;
      padding: 0.5em;
      margin: 10px 10px 10px 0;
      border:1px solid green
  }
  #draggable, #draggable2 {
      width: 100px;
      height: 30px;
      padding: 0.5em;
      float:left;
      margin: 10px 10px 10px 0;
  }
  #droppable {
      width:250px;
      height:500px;
      border:1px solid red;
      padding: 0.5em;
      float: left;
      margin: 10px;
  }

JavaScript

$(function () {
    $(".draggable2").draggable({
        revert: "invalid",
        stop: function () {
            $(this).draggable('option', 'revert', 'invalid');
        }
    });
    $(".draggable2").droppable({
        greedy: true,
        tolerance: 'touch',
        drop: function (event, ui) {
            ui.draggable.draggable('option', 'revert', true);
        }
    });
    $("#droppable").droppable({
        drop: function () {
            //var xPos = offset.left;
            //var yPos = offset.top;    
            //alert( $(this).position().left ); 		
            $(this).find("p").html("Yes,it is dropped!");
        }
    });
});