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

        #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" style="font-weight: 700;text-align: center;font-size: 25px;margin-left: 25%;">1</span>
            </div>
        </div>
    </div>
    <div class="sidebar">
        <h1>Dodawanie elementów</h1>
        <label>Wpisz ilość śrubek:
        <input type="text" name="lsrubki"> </label>
        <button>Dodaj</button>
    </div>

    <script>
        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>