<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Drag</title>
    <style>
        .main-container {
          background-color: #cacaca;
          width: 80%;
          height: 98vh;
          border-radius: 7px;
          position: relative;
          float: left;
        }

        #container {
            width: 80%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 7px;
            touch-action: none;
            position: absolute;
            z-index: 1
        }

        #container span {
            width: 30px;
            height: 30px;
            background-color: rgb(245, 230, 99);
            border: 2px solid rgba(0,0,0, .5);
            border-radius: 50%;
            touch-action: none;
            user-select: none;
            font-weight: 700;
            text-align: center;
            font-size: 25px;
            margin-left: 2px;
        }

        #container span:active {
            background-color: rgba(0,100,100, 1.00);
        }

        img {
          margin: 10px;
        }

        .sidebar {
            width: 19%;
            position: relative;
            float: right;
        }

        .sidebar input[type="text"] {
            width: 20%;
        }

        .sidebar input {
            margin-bottom: 10%;
        }

        .sidebar label {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="main-container">
        <div id="outerContainer">
            <div id="container">
                <!--<span id="item">1</span>-->
            </div>
        </div>

        <img id="output">
        <script>
            var loadFile = function(event) {
              var reader = new FileReader();
              reader.onload = function(){
                var output = document.getElementById('output');
                output.src = reader.result;
              };
              reader.readAsDataURL(event.target.files[0]);
            };
      </script>
    </div>
    <div class="sidebar">
        <h1>Dodawanie elementów</h1>
        <label>Dodaj obraz:
        <input type="file" accept="image/*" onchange="loadFile(event)"> </label>
        <label>Wpisz ilość śrubek:
        <input type="text" name="lsrubki" value="" id="ilosc"> </label>
        <button onclick="ilosc()">Dodaj</button>
    </div>

    <script>
        function ilosc(){
            var ilosc = document.getElementById("ilosc").value;

            for(var i = 1; i <= ilosc; i++) {
                const element1 = document.createElement("span");

                element1.id = "item"+i;

                element1.innerText = i;


                const div = document.querySelector("#container");
                div.appendChild(element1);

                var dragItem = document.querySelector("#item");
                var container = document.querySelector("#container");

                var active = false;
                var currentX;
                var currentY;
                var initialX;
                var initialY;
                var xOffset = 0;
                var yOffset = 0;

                container.addEventListener("touchstart", dragStart, false);
                container.addEventListener("touchend", dragEnd, false);
                container.addEventListener("touchmove", drag, false);

                container.addEventListener("mousedown", dragStart, false);
                container.addEventListener("mouseup", dragEnd, false);
                container.addEventListener("mousemove", drag, false);

                function dragStart(e) {
                    if (e.type === "touchstart") {
                        initialX = e.touches[0].clientX - xOffset;
                        initialY = e.touches[0].clientY - yOffset;
                    } else {
                        initialX = e.clientX - xOffset;
                        initialY = e.clientY - yOffset;
                    }

                    if (e.target === dragItem) {
                        active = true;
                    }
                }

                function dragEnd(e) {
                    initialX = currentX;
                    initialY = currentY;

                    active = false;
                }

                function drag(e) {
                    if (active) {
                      e.preventDefault();

                      if (e.type === "touchmove") {
                          currentX = e.touches[0].clientX - initialX;
                          currentY = e.touches[0].clientY - initialY;
                      } else {
                          currentX = e.clientX - initialX;
                          currentY = e.clientY - initialY;
                      }

                      xOffset = currentX;
                      yOffset = currentY;

                      setTranslate(currentX, currentY, dragItem);
                    }
                }

                function setTranslate(xPos, yPos, el) {
                    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
                }
            }

            }


    </script>
</body>

</html>