Den Designer v1 (¿_?, Equinium)

rengiseD neD

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="buttons"> 
  <span class="button" id="up">up</span>
  <span class="button" id="down">down</span> 
  <div><span>Z-index: </span><span id="index"></span></div> 
</div> 
<div id="images">
  <img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
  <img class="draggable" src="http://i64.tinypic.com/jac9sj.jpg">
  <img class="draggable" src="http://i64.tinypic.com/se6gia.jpg">
  <img class="draggable" src="http://i65.tinypic.com/205p9v6.jpg">
  <img class="draggable" src="http://i67.tinypic.com/21mvzue.jpg">
  <img class="draggable" src="http://i68.tinypic.com/ml36zs.jpg">
  <img class="draggable" src="http://i67.tinypic.com/25uhanm.png">
  <img class="draggable" src="http://i65.tinypic.com/2a95z6r.png">
  <img class="draggable" src="http://i64.tinypic.com/2ut6tl5.png">
  <img class="draggable" src="http://i63.tinypic.com/ygppz.png">
  <img class="draggable" src="http://i68.tinypic.com/14b15l.png">
  <img class="draggable" src="http://i67.tinypic.com/2e4ae50.jpg">
  <img class="draggable" src="http://i68.tinypic.com/24xkgmv.jpg">
  <img class="draggable" src="http://i63.tinypic.com/spuoop.png">
  <img class="draggable" src="http://i63.tinypic.com/2iu2vt1.png">
  <img class="draggable" src="http://i67.tinypic.com/11rd380.png">
  <img class="draggable" src="http://i64.tinypic.com/2u5yu03.png">
  <img class="draggable" src="http://i64.tinypic.com/2ex4fit.png">
  <img class="draggable" src="http://i66.tinypic.com/68vwnc.png">
  <img class="draggable" src="http://i66.tinypic.com/ilddag.png">
  <img class="draggable" src="http://i67.tinypic.com/jafg4h.png">
  <img class="draggable" src="http://i65.tinypic.com/11w82et.png">
  <img class="draggable" src="http://i67.tinypic.com/msjh46.png">
  <img class="draggable" src="http://i67.tinypic.com/1l0kj.png">
  <img class="draggable"...

CSS

#images {
  overflow: auto;
  margin-top: 10px;
  height: 778px;
  position: relative;
}
#background {
  position: absolute;
  z-index: -999999999999999999999;
}
.button { 
  background: red; 
  padding: 10px; 
  cursor: pointer; 
  display: inline-block; 
}
.button:hover {
  color: white; 
}
#buttons { 
  position: sticky; 
  margin-left: 10px;
  top: 10px;
  z-index: 999999999999999999999; 
}
.draggable { 
  position: absolute;
  z-index: 0;
  cursor: pointer;
}
body {
    font-family: Arial;
}

* {
    box-sizing: border-box;
}

form.example input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
}

form.example button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

form.example button:hover {
    background: #0b7dda;
}

form.example::after {
    content: "";
    clear: both;
    display: table;
}

JavaScript

$(function() {
  $(".draggable").draggable();
});
var selectedLayer;
$(".draggable").click(function() { 
	selectedLayer = this; 
  $("#index").html(parseInt($(selectedLayer).css("z-index")))
}) 
$("#up").click(function() { 
	x = parseInt($(selectedLayer).css("z-index")) + 1;
  $(selectedLayer).css('z-index', x); 
  $("#index").html(x)
}) //ends function
$("#down").click(function() { 
	x = parseInt($(selectedLayer).css("z-index")) - 1; 
  $(selectedLayer).css('z-index', x); 
  $("#index").html(x) 
})