如何在单击时移动一系列元素的位置？

<div id="container">
  <div class="element">元素1</div>
  <div class="element">元素2</div>
  <div class="element">元素3</div>
</div>

#container {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  cursor: pointer;
}

var elements = document.getElementsByClassName('element');

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', moveElement);
}

function moveElement() {
  var container = document.getElementById('container');
  var containerRect = container.getBoundingClientRect();

  var elementRect = this.getBoundingClientRect();
  var offsetX = elementRect.left - containerRect.left;
  var offsetY = elementRect.top - containerRect.top;

  var newX = Math.random() * (containerRect.width - elementRect.width);
  var newY = Math.random() * (containerRect.height - elementRect.height);

  this.style.transform = 'translate(' + (newX - offsetX) + 'px, ' + (newY - offsetY) + 'px)';
}