Place boxes where clicked

Inspired by: http://stackoverflow.com/questions/4666367/how-do-i-position-a-div-relative-to-the-mouse-pointer-using-jquery

by MegaScience

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

img {
  display: block;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

div.placedElements {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: green;
  border: red 1px solid;
  z-index: 0;
  opacity: 0.75;
  border-radius: 50%;
}

div.placedElements:nth-last-child(n+200) {
  background-color: yellow;
}

div.placedElements:not([style*="top"]):not([style*="left"]) {
  visibility: hidden;
}

div.placedElements:hover {
  background-color: red;
}

div.active {
  background-color: purple !important;
  pointer-events: none;
}

div#current {
  border: black solid 1px;
  background-color: blue;
  z-index: 100;
}

/*html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

img {
  display: block;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

.boxElements {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: green;
  border: red 1px solid;
  z-index: 0;
  opacity: 0.75;
  border-radius: 50%;
}

.boxElements:nth-last-child(n+200) {
  background-color: yellow;
}

.boxElements:not([style*="top"]):not([style*="left"]) {
  visibility: hidden;
}

.boxElements:hover {
  background-color: red;
}

.activeThing {
  background-color: purple !important;
  pointer-events: none;
}

#lastThing {
  border: black solid 1px;
  background-color: blue;
  z-index: 100;
}*/

JavaScript

const elemMaker = {
	createNew: function () {
		if(this.current !== undefined) {
			this.current.classList.remove('active')
			this.current.removeAttribute('id')
		}
		this.current = document.createElement('div')
		this.current.setAttribute('id', 'current')
		this.current.classList.add('placedElements')
		this.current.classList.add('active')
		this.within.appendChild(this.current)
	},
	init: function (within = document.body) {
		this.allElements = document.getElementsByClassName('placedElements')
		this.within = within
		this.positions = new Array(4).fill(0)
		this.bounds = {}
		this.createNew()
		within.onmousemove  = e => {
			//this.current.style.top = (e.pageY - (this.current.offsetHeight / 2)) + 'px'
			//this.current.style.left = (e.pageX - (this.current.offsetWidth / 2)) + 'px'
			this.positions[1] = this.positions[3] - e.clientX
			this.positions[2] = this.positions[4] - e.clientY
			this.positions[3] = e.clientX
			this.positions[4] = e.clientY
			this.bounds.minBoundX = within.offsetLeft
			this.bounds.minBoundY = within.offsetTop
			this.bounds.maxBoundX = Math.max(this.bounds.minBoundX + within.offsetWidth - this.current.offsetWidth, this.current.offsetWidth)
			this.bounds.maxBoundY = Math.max(this.bounds.minBoundY + within.offsetHeight - this.current.offsetHeight, this.current.offsetHeight)
			this.current.style.top = Math.min(Math.max(this.current.offsetTop - this.positions[2], this.bounds.minBoundY), this.bounds.maxBoundY) + 'px'
			this.current.style.left = Math.min(Math.max(this.current.offsetLeft - this.positions[1], this.bounds.minBoundX), this.bounds.maxBoundX) + 'px'
		}
		within.onmousedown  = () => {
			if(this.current.style.top === undefined || this.current.style.left === undefined) return
			this.createNew()
			while(this.allElements.length > 200) this.allElements[0].remove()
		}
		within.onmouseenter = () => this.current.classList.add('active')
		within.onmouseleave = () =>...