JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div class="container">
      <div id='puz'>
        <i class='first' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
        <i class='secon' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
        <i class='third' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
      </div>
      <div id='puzz'>
        <i class='third' draggable='true' ondragstart='drag(event)'></i>
        <i class='first' draggable='true' ondragstart='drag(event)'></i>
        <i class='secon' draggable='true' ondragstart='drag(event)'></i>
      </div>
    </div>

CSS

:root {
  --color:tomato;
  --height:75px;
  --border-radius:35px;
  /*   turn on below for image based version */
  /*   --image:url('https://media.gettyimages.com/vectors/hot-dog-dachshund-puppy-vector-id895877422?s=2048x2048'); */
}

#puz, #puzz {
  /*position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);*/
  width:300px;
  height:var(--height);
  border-radius:var(--border-radius);
  border:3px dashed lightgray;  
  white-space:nowrap;
  user-select:none;
}
#puzz {
  /*transform:translate(-50%,100%);*/
  border:0;
}

#puz i {
  display: inline-block;
  width:100px;
  height:var(--height);
}

#puzz i {
  display:inline-block;
  width:100px;
  height:var(--height);
  background:var(--color);
  background-image:var(--image);
  background-size:300px 300px;
  cursor:move;
}
.first {
  border-top-left-radius:var(--border-radius);
  border-bottom-left-radius:var(--border-radius);
  background-position:left center !important;
}
.secon {
  background-position:center center !important;
}
.third {
  border-top-right-radius:var(--border-radius);
  border-bottom-right-radius:var(--border-radius);
  background-position:right center !important;
}

.dropped {
  background:var(--color);
  background-image:var(--image);
  background-size:300px 300px;
}
.done {
  opacity:0;
  pointer-events:none;
}

@keyframes allDone {
  50% { transform:translate(-50%,-50%) scale(1.2); }
}
.container {
  width: 300px;
  height: 400px;
  margin: 200px auto;
}

JavaScript

function color() {
        let root = document.documentElement
        root.style.setProperty('--color', "hsl("+Math.floor(Math.random()*360)+"deg,50%,50%)");  
      }
      color()

      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.className);
        ev.effectAllowed = "copyMove";
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text")
        
        if(ev.target.className == data){
          ev.target.classList.add('dropped')
          document.querySelector('.'+data+"[draggable='true']").classList.add('done')
          
          if(document.querySelectorAll('.dropped').length == 3) {
            document.querySelector('#puz').style.border = 'none'  
            document.querySelector('#puz').style.animation = 'allDone 1s linear forwards'  
            
            setTimeout(function(){
              document.body.innerHTML = "<div class='container'><div id='puz'>  <i class='first' ondrop='drop(event)' ondragover='allowDrop(event)'></i>  <i class='secon' ondrop='drop(event)' ondragover='allowDrop(event)'></i>  <i class='third' ondrop='drop(event)' ondragover='allowDrop(event)'></i></div><div id='puzz'>  <i class='third' draggable='true' ondragstart='drag(event)'></i>  <i class='first' draggable='true' ondragstart='drag(event)'></i>  <i class='secon' draggable='true' ondragstart='drag(event)'></i></div></div>";
              color()
            },1500)
          }    
        }  
      }