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="menu">
  <img class="draggable miniature" src="http://i64.tinypic.com/jac9sj.jpg">
  <img class="draggable miniature" src="http://i64.tinypic.com/se6gia.jpg">
  <img class="draggable miniature" src="http://i65.tinypic.com/205p9v6.jpg">
  <img class="draggable miniature" src="http://i67.tinypic.com/21mvzue.jpg">
  <img class="draggable miniature" src="http://i68.tinypic.com/ml36zs.jpg">
  <img class="draggable miniature" src="http://i67.tinypic.com/25uhanm.png">
  <img class="draggable miniature" src="http://i65.tinypic.com/2a95z6r.png">
  <img class="draggable miniature" src="http://i64.tinypic.com/2ut6tl5.png">
  <img class="draggable miniature" src="http://i63.tinypic.com/ygppz.png">
  <img class="draggable miniature" src="http://i68.tinypic.com/14b15l.png">
  <img class="draggable miniature" src="http://i67.tinypic.com/2e4ae50.jpg">
  <img class="draggable miniature" src="http://i68.tinypic.com/24xkgmv.jpg">
  <img class="draggable miniature" src="http://i63.tinypic.com/spuoop.png">
  <img class="draggable miniature" src="http://i63.tinypic.com/2iu2vt1.png">
  <img class="draggable miniature" src="http://i67.tinypic.com/11rd380.png">
  <img class="draggable miniature" src="http://i64.tinypic.com/2u5yu03.png">
  <img class="draggable miniature" src="http://i64.tinypic.com/2ex4fit.png">
  <img class="draggable miniature" src="http://i66.tinypic.com/68vwnc.png">
  <img class="draggable miniature" src="http://i66.tinypic.com/ilddag.png">
  <img class="draggable miniature" src="http://i67.tinypic.com/jafg4h.png">
  <img class="draggable miniature" src="http://i65.tinypic.com/11w82et.png">
  <img...

CSS

#images {
  overflow: auto;
  margin-top: 10px;
  height: 778px;
}

#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;
}

.miniature {
  height: 20px;
}

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

var selectedLayer;

$(function() {
  $(".draggable").draggable({
    helper: function(event) {
      return $(this).clone().removeClass("miniature")
    }
  });
});

$("#images").droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var new_item = $(ui.helper).clone();

    new_item.removeClass('draggable');
    new_item.mousedown(setLayer);
    new_item.draggable();

    $(this).append(new_item);
  }
});

setLayer = function() {
  selectedLayer = this;
  $("#index").html(parseInt($(selectedLayer).css("z-index")))
}

$(".draggable").mousedown(setLayer)
$("#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)
})