<!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
        }

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

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

        img {
          margin: 10px;
        }

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

        .sidebar input {
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="main-container">
        <div id="outerContainer">
            <!--<div id="container">
                <span id="item">1</span>
            </div>-->
        </div>
        <img src="DBBR424_Step03_background.png">
    </div>
    <div class="sidebar">
        <h1>Dodawanie elementów</h1>
        <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 element = document.createElement("div");
                const element1 = document.createElement("span");

                element.id = "container";
                element1.id = "item";

                element1.innerText = i;


                const div = document.querySelector("#outerContainer");
                div.appendChild(element);
                element.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>