JSFiddle - React, Tailwind, and code Playground

by VolatileStorm

CSS

.note
      {
        display: inline-block;
        position: absolute;
        width: 100px;
        height: 100px;

        border: 1px solid black;
        background-color: white;
      }

      .pile
      {
        display: inline-block;
        position: relative;
        padding: 4px;
        border: 1px solid red;
    
        height: 120px;
        width:  120px;
      }

JavaScript

function newNote()
{
    var randMod = 20;
    var r1 = ( Math.random() - 1.0/2.0) * randMod;
    var r2 = ( Math.random() ) * randMod;
    var r3 = ( Math.random() ) * randMod;
    var note = $('<div/>').addClass('note')
                          .css('position', 'absolute')
                          .css('-webkit-transform', 'rotate('+ r1 +'deg)')
                          .css('top', r2 )
                          .css('left', r3 );
    return note;
}

$(document).ready(function()
{
  var pile = $('<div/>').addClass('pile')
                        .addClass('draggable')
                        .addClass('droppable');

  for (var i =0; i < 5; i++)
  {
    var note = newNote();
    pile.append(note);
  }
  
  $('body').append(pile);
    
  var note = newNote();
  note.addClass('draggable')
      .css('top', '200px');
  $('body').append(note);
  

  $('.draggable').draggable({ containment: 'window'});
  $('.droppable').droppable({
                              drop: function(event, ui)
                              {
                                console.log(event);
                                console.log(ui);
                                ui.draggable.appendTo(this);
                              }
                            });
});