<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag</title>

    <script src="static/jquery-3.5.1.js"></script>
    <script src="static/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="static/style.css">


</head>
<body>
<!-- container -->
<div class="container">

	<div class="main-canvas">

        <div class="box card1" name="card1">1 up
            <p style="font-size: 10px">100</p>
        </div>
        <div class="box card2">2</div>
        <div class="box card3">3</div>
        <div class="box card4">4</div>
        <div class="box card5">5</div>
        <div class="box card6">6</div>
        <div class="box card7">7</div>
        <div class="box card8">8</div>
        <div class="box card9">9</div>

    </div>

</div><!-- container -->

<script>
    $(document).ready(function () {

    var box = $(".box");
    var mainCanvas = $(".main-canvas");

    box.draggable({
        containment: mainCanvas,
        helper: "clone",

        start: function () {
            $(this).css({
                opacity: 0
            });

            $(".box").css("z-index", "0");
        },

        stop: function () {
            $(this).css({
                opacity: 1
            });
        }
    });

    box.droppable({
        accept: box,

        drop: function (event, ui) {
            var draggable = ui.draggable;
            var droppable = $(this);
            var dragPos = draggable.position();
            var dropPos = droppable.position();

            console.log(dropPos);

            draggable.css({
                left: dropPos.left + "px",
                top: dropPos.top + "px",
                "z-index": 20
            });

            droppable.css("z-index", 10).animate({
                left: dragPos.left,
                top: dragPos.top
            });
        }
    });

});
</script>

</body>
</html>