Untitled

<html>

<head>
    <style>
        .doPrzenoszenia {
            font-size: 50px;
        }

        #e1 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: fixed;
        }

        #e2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 150px;

        }

        .pudelko {
            margin-left: 150px;
            margin-top: 20px;
            width: 244px;
            height: 240px;
            border: 1px solid black;
            float: left;

        }

        .pudelkoMale {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid #bbb;
            float: left;


        }

        .suma {
            margin: 10px 0 0 10px;
            width: 220px;
            height: 100px;
            border: 1px solid gray;
            font-size: 70px;
        }

    </style>
</head>

<body>
    <div class="doPrzenoszenia" value="1" id="e1">1</div>
    <div class="doPrzenoszenia" value="2" id="e2">2</div>

    <div class="pudelko" id="p1">
        <div class="suma" id="suma1"></div>
        <div class="pudelkoMale" id="pm1" pudelko="1" value="0"></div>
        <div class="pudelkoMale" id="pm2" pudelko="1" value="0"></div>
    </div>
    <div class="pudelko" id="p2">
        <div class="suma" id="suma2"></div>
        <div class="pudelkoMale" id="pm3" pudelko="2" value="0"></div>
        <div class="pudelkoMale" id="pm4" pudelko="2" value="0"></div>
    </div>
    <script>
        var czyPodniesione = false;
        var podniesiony; //Podniesiony element
        var doPrzenoszenia = document.getElementsByClassName("doPrzenoszenia"); //klasa divów do przenoszenia
        var pudelko = document.getElementsByClassName("pudelkoMale"); //klasa małych pudełek
        var suma = []; //suma małych pudełek w poszczególnych dużych pudełkach

        function dragStart(e) {
            czyPodniesione = true;
            podniesiony = document.getElementById(this.getAttribute("id"));


            //Zmienianie Value małego pudełka w przypadku kiedy weźmiemy element, który się w nim znajduje
            for (var i = 0; i < pudelko.length; i++) {
                var px = pudelko[i].offsetLeft;
                var py = pudelko[i].offsetTop;
                var pw = pudelko[i].clientWidth;
                var ph = pudelko[i].clientHeight;
                var ktore_pudelko = pudelko[i].getAttribute("pudelko");
                if (e.clientX > px && e.clientX < px + pw &&
                    e.clientY > py && e.clientY < py + ph &&
                    pudelko[i].getAttribute("value")==this.getAttribute("value")) {
                    pudelko[i].setAttribute("value", 0);
                    break;
                }

            }

        }

        function drag(e) {
            if (czyPodniesione) {
                podniesiony.style.position = "fixed";
                podniesiony.style.left = e.clientX + "px";
                podniesiony.style.top = e.clientY + "px";

            }
        }

        function dragStop(e) {
            if (czyPodniesione) {
                for (var i = 0; i < pudelko.length; i++) {
                    var px = pudelko[i].offsetLeft;
                    var py = pudelko[i].offsetTop;
                    var pw = pudelko[i].clientWidth;
                    var ph = pudelko[i].clientHeight;
                    var ktore_pudelko = pudelko[i].getAttribute("pudelko");
                    if (e.clientX > px && e.clientX < px + pw &&
                        e.clientY > py && e.clientY < py + ph &&
                        pudelko[i].getAttribute("value") == 0) {
                        podniesiony.style.left = px + "px";
                        podniesiony.style.top = py + "px";
                        pudelko[i].setAttribute("value", this.getAttribute("value")); //Zmienianie value małego pudełka na value przenoszonego diva
                        break;
                    }

                }


                //Zmienianie sumy każdego pudełka na 0
                for (var i = 0; i < pudelko.length; i++) {
                    var ktore_pudelko = pudelko[i].getAttribute("pudelko");
                    suma[ktore_pudelko] = 0;
                }

                for (var i = 0; i < pudelko.length; i++) {
                    var ktore_pudelko = pudelko[i].getAttribute("pudelko");
                    suma[ktore_pudelko] += parseInt(pudelko[i].getAttribute("value"));
                    document.getElementById("suma" + ktore_pudelko).innerHTML = suma[ktore_pudelko];
                }
                czyPodniesione = false;
                podniesiony = "";
            }
        }

        for (var i = 0; i < doPrzenoszenia.length; i++) {
            doPrzenoszenia[i].addEventListener("mousedown", dragStart);
            doPrzenoszenia[i].addEventListener("mouseup", dragStop);
        }
        document.addEventListener("mousemove", drag);

    </script>
</body>

</html>