JSFiddle - React, Tailwind, and code Playground

by Natcher86

HTML

<div class="container">
  <div id="scene">
    <div id="obj-1" class="object">Drag me</div>
  </div>
</div>

CSS

body { 
      width: 100%;
      height: 100%;
      font-size: 100%; 
      background-color: #F1F2F3;
    }
    
    .container {
      font-size: 200%;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10em;
      height: 10em;
      margin: -5em 0 0 -5em;
      -webkit-perspective: 1000px;
    }

    #scene { 
      width: 100%;
      height: 100%;
      background: red;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateX( 60deg ) rotateZ( 0deg ); 
    }

    .object {
      position: absolute;
      width: .5em;
      height: .5em;
      background: white;
      -webkit-transform-style: preserve-3d;
      -webkit-transform-origin: 2em;
      -webkit-transition: transform .1s linear;
    }

    .object:hover{
      cursor: -webkit-grab;
    }

    .object:active {
      cursor: -webkit-grabbing;
    }

    #obj-1 { left: 0em; top: 9.5em ; }

JavaScript

var object = document.getElementsByClassName('object'),
    mouseDown = false;

function initMove() {

    for(var i=0; i<object.length; i++) { 

      object[i].addEventListener("mousedown", function(event) {
        mouseDown = true;
        grabbed = $(this);
        startX = (event.pageX - $('#scene').offset().left);
        startY = (event.pageY - $('#scene').offset().top);
        curX = parseFloat($(this).css('left'));
        curY = parseFloat($(this).css('top'));
      }, false);

    }

    document.addEventListener("mousemove", function (event) {
      if (mouseDown == true) {
        event.preventDefault();
        moveX = (event.pageX - $('#scene').offset().left);
        moveY = (event.pageY - $('#scene').offset().top);
        distX = (moveX - startX);
        distY = (moveY - startY);
        dragY = (curY + distY);
        dragX = (curX + distX);
        dragobject(grabbed);
      };
    }, false);

    document.addEventListener("mouseup", function(event) {
      mouseDown = false;
      grabbed.css('left', Math.round(dragX) + 'px');
      grabbed.css('top', Math.round(dragY) + 'px');
      startX = 0;
      startY = 0;
      distX = 0;
      distY = 0;
    }, false);

}

function dragobject(grabbed) {
  grabbed.css('left', dragX + 'px');
  grabbed.css('top', dragY + 'px');
}

function init() {
  initMove();
  document.onselectstart = function(){ return false; }
};

init();