如何使可拖动元素适合div且不相互折叠

<div id="targetDiv">
  <div id="draggableElement" draggable="true">可拖动元素</div>
</div>

#targetDiv {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
}

#draggableElement {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

var draggableElement = document.getElementById('draggableElement');
var targetDiv = document.getElementById('targetDiv');
var offsetX, offsetY;

draggableElement.addEventListener('dragstart', function(e) {
  offsetX = e.clientX - draggableElement.offsetLeft;
  offsetY = e.clientY - draggableElement.offsetTop;
});

draggableElement.addEventListener('drag', function(e) {
  draggableElement.style.left = (e.clientX - offsetX) + 'px';
  draggableElement.style.top = (e.clientY - offsetY) + 'px';
});

draggableElement.addEventListener('dragend', function(e) {
  targetDiv.appendChild(draggableElement);
});