Is there a way to generate images in random positions (javascript)?

I am currently experimenting with a d-i-y collage game, where users can click an image and drag it into a desired position. The code works fine, except at load time all of the images are scrunched up in the top left corner. The are on top of one another and hide those under them.

I can't figure out why the random position generation isn't working. The images are in div, as a beginner I don't know if there's another way to do it at the moment. Is Math.random() possible? Would appreciate some help in figuring this out. Thank you!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    let currentlyDragging;
    let drawing = false;;
    let offset_x;
    let offset_y;
    let puzzle;


    $(window).load(function () {
        $(".draggable").click(startDragging);
        $(".draggable").mousemove(whileDragging);
        $("#puzzle").mousemove(whileDragging);

        puzzle = document.getElementById("puzzle");
    });

    function startDragging(e) {
        if (!drawing) {
            drawing = true;
            currentlyDragging = $(this);
            if (offset_x == null && offset_y == null) {
                var current_origin_y;
                var current_origin_x;
                var current_origin_y_string = currentlyDragging.context.style['margin-top'];
                if (current_origin_y_string === "") {
                    current_origin_y = 0;
                } else {
                    current_origin_y = parseInt(current_origin_y_string.split("px")[0]);
                }
                var current_origin_x_string = currentlyDragging.context.style['margin-left'];

                if (current_origin_x_string === "") {
                    current_origin_x = 0;
                } else {
                    current_origin_x = parseInt(current_origin_x_string.split("px")[0]);
                }
                offset_x = current_origin_x - e.pageX;
                offset_y = current_origin_y - e.pageY;
            }
        } else {
            drawing = false;
            currentlyDragging = null;
            offset_x = null;
            offset_y = null;
        }
    }

    function whileDragging(e) {
        if (currentlyDragging == null) {
            return false;
        }

        currentlyDragging.css({
            "margin-top": Math.min(Math.max(e.pageY + offset_y, 0), puzzle.clientHeight - currentlyDragging.context.height) + "px",
            "margin-left": Math.min(Math.max(e.pageX + offset_x, 0), puzzle.clientWidth - currentlyDragging.context.width) + "px"
        });
    }
</script>


<style>
    .draggable {
        position: absolute;
        cursor: pointer;
        user-select: none;
    }
</style>

<div id="puzzle" scroll="no" style="height: 100%; overflow: hidden; border: 5px solid yellow;">
    <img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
    <img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
    <img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
    <img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
    <img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
</div>
</body>