JSFiddle - React, Tailwind, and code Playground

by bighostkim

HTML

<!DOCTYPE html>
<html>
<head>
<style>
div.outside {
  height: 500px; border: 1px solid black;
}
</style>
<script>
var Draggable = function(element) {
  this.dragPanel = element.cloneNode(true);
  this.dragPanel.style.opacity = 0;
  this.handleEvent = function(event) {
    switch(event.type) {
      case 'mousedown':
        if (nextEl = element.nextSibling) 
          element.parentNode.insertBefore(this.dragPanel, nextEl);
        else
          element.parentNode.appendChild(this.dragPanel);
        this.dragPanel.style.cssText = "position:absoulte; background-color:blue;  left:0px; top:0px; width:100%, height:100%";
        console.log("mousedown");
        break;
      case 'mousemove':
        console.log("mousemove");
        break;
      case 'mouseup':
        this.dragPanel.style.cssText = element.style.cssText;
        this.dragPanel.style.opacity = 0;
        element.parentNode.removeChild(this.dragPanel);
        console.log("mouseup");
        break;
    }
  };
  element.addEventListener('mousedown', this, false);
  this.dragPanel.addEventListener('mouseup', this, false);
}
window.onload = function() {
  var el = document.querySelector(".draggable");
  new Draggable(el);
}
</script>
</head>
<body>
  <div class="outside">
    <hr class="draggable" />
  </div>
</body>
</html>