Editor

by murgiaMarco

HTML

<div class="draggable" id="wrapper" positionX="320" positionY="220">
 
    <img class="test" src="https://media.giphy.com/media/FIbhfoRfWAuru/giphy.gif" style="width:50px;height:50px">
    </img>
	  
</div>
<div class="draggable" id="wrapper" positionX="130" positionY="200">
  
    <img class="test" src="https://media.giphy.com/media/UQjnRHaatu9Ko/giphy.gif" style="width:50px;height:50px">
    </img>
		  
</div>
<div class="draggable" id="wrapper" positionX="430" positionY="110">
 
    <img class="test" src="https://media.giphy.com/media/zr5oDS1yQN6Ss/giphy.gif" style="width:50px;height:50px">
    </img>
		 
</div>
<div class="draggable" id="wrapper" positionX="200" positionY="100">
 
    <img class="test" src="https://media.giphy.com/media/iFJztt7xiI5t6/giphy.gif" style="width:50px;height:50px">
    </img>
		  
</div>

CSS

body {
  width: 1000px;
  height: 1000px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
-o-user-select: none;
  user-select: none;
}

#wrapper,
.test {
  position: absolute;
}

.test {
  background: #b2b2b2;
  box-shadow: 2px 2px 11px 0px rgba(0, 0, 0, 0.7);
}

.draggable {
  perspective: 1000px;
  width: 60px;
  height: 60px;
}

.thumb {
  width: 50px;
  height: 50px;
  perspective: 1000px;
}

.thumb div {
  display: block;
  width: 100%;
  height: 100%;
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.5s;
}


.thumb div: after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 36px;
  background: inherit;
  background-size: cover, cover;
  background-position: bottom;
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.thumb div span {
    visibility: hidden;
    color: black;
    text-transform: uppercase;
    position: absolute;
    top: 120%;
    left: 0;
    width: 50px;
    font: menu;
    text-align: center;
    transform: rotateX(-90deg);
    transform-origin: top;
    z-index: 1;
    overflow-wrap: break-word;
}

.thumb div: before {
     
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  opacity: 0.15;
  transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  transform-origin: bottom;
}

.thumb:hover div: efore {
  opacity: 1;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  transform: rotateX(0) translateZ(-60px) scale(0.85);
}

JavaScript

document.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

$(document).ready(function() {
  var list = $(".draggable");
  var count = list.length;
  document.body.style.cursor = "pointer";


  for (var i = 0; i < count; i++) {
    var item = list[i];

    offsetX = item.getAttribute("positionx");
    offsetY = item.getAttribute("positiony");

    item.style.left = offsetX + "px";
    item.style.top = offsetY + "px";

    enableDragging(item);

  }
});

function enableDragging(ele) {

  var dragging = dragging || false,
    x, y, Ox, Oy,
    current;



  enableDragging.z = enableDragging.z || 1;
  var grabber = ele;
  grabber.onmousedown = function(ev) {
    ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    current = target.parentNode;
    dragging = true;
    x = ev.clientX;
    y = ev.clientY;
    Ox = current.offsetLeft;
    Oy = current.offsetTop;
    current.style.zIndex = ++enableDragging.z;
    // cached value
    var viewportWidth = viewport().width;
    var viewportHeight = viewport().height;







    document.onmousemove = function(ev) {

      ev = ev || window.event;
      if (dragging == true) {
        var Sx = parseFloat(ev.clientX) - x + Ox;
        var Sy = parseFloat(ev.clientY) - y + Oy;
        current.style.left = Math.min(Math.max(Sx, Math.min(viewportWidth - Sx, 0)), viewportWidth - current.offsetWidth) + "px";
        current.style.top = Math.min(Math.max(Sy, Math.min(viewportHeight - Sy, 0)), viewportHeight - current.offsetHeight) + "px";
              			document.body.style.cursor = "move";

      }
    }

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

    document.onmouseup = function(ev) {
      ev = ev || window.event;
      dragging && (dragging = false);

      var bodyRect = document.body.getBoundingClientRect(),
        elemRect = ev.target.getBoundingClientRect(),
        offsetX = elemRect.top -...