Wanting to display an array of images in a random order and on random points of screen on click and then be draggable

I'm Wanting to display an array of images in a random order and on random points of the screen once rendered on click and then be draggable around the viewport. I've attached my current code and am totally open to changing anything. Any help would be greatly appreciated.

Thanks so much!

     function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;
  
  // set the position
  img.style.position = 'absolute';
  img.style.top = document.body.clientHeight * Math.random() + 'px';
  img.style.left = document.body.clientWidth * Math.random() + 'px';

  document.body.appendChild(img);
}
document.getElementById('foo').addEventListener('click', () =>
  show_image("<?php bloginfo('template_url'); ?>/img/I flexibly pay attention to.jpeg", 300, 300, 'foo')
);