JSFiddle - React, Tailwind, and code Playground

by Trevor W

HTML

<button class="btn">+</button>
<div class="foo">
  <ul></ul>
</div>

CSS

*{margin:0;padding:0;}
.foo{
  overflow:auto;
 margin: 20px 0 0 0; 
}
.btn{
  height:40px;width:40px;
}

.foo li{
  list-style:none;
  margin:5px;
  height:60px;width:60px;
  background-color: rgba(250,250,250,1);
  border:1px solid rgba(230,230,230,1);
  border-radius:3px;
  float: left;
  cursor:move;
}
.foo li.ph{
  background-color: rgba(250,250,100,1);
  border:1px dashed rgba(200,200,200,1);
}

JavaScript

function addItem(){
	var data = '<li class="dropzone"></li>';
	$('.foo ul').append(data);
  
  $( function() {
    $( ".foo ul" ).sortable({
      placeholder: "ph"
    });
    $( ".foo ul" ).disableSelection();
  } );
  
}
$('.btn').on("click",function(){
	addItem();
});

document.addEventListener("dragstart", function( event ) {
    // store a ref. on the dragged elem
    console.log("dragstart");
    dragged = event.target;
    // make it half transparent
    event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
      // reset the transparency
      console.log("dragend");
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      console.log("dragover");
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      
      if ( event.target.className == "dropzone" ) {
      		console.log("dragenter");
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          console.log("dragleave");
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
      		console.log("drop");
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);