如何拖动缩放的元素

<div id="draggable" style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; resize: both; overflow: auto;">
  <!-- 元素内容 -->
</div>

var draggableElement = document.getElementById('draggable');
var isDragging = false;
var startX, startY;

draggableElement.addEventListener('mousedown', function(e) {
  isDragging = true;
  startX = e.clientX - draggableElement.offsetLeft;
  startY = e.clientY - draggableElement.offsetTop;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var newX = e.clientX - startX;
    var newY = e.clientY - startY;
    draggableElement.style.left = newX + 'px';
    draggableElement.style.top = newY + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

var draggableElement = document.getElementById('draggable');
var isResizing = false;
var startX, startY;

draggableElement.addEventListener('mousedown', function(e) {
  if (e.target === draggableElement) {
    isResizing = true;
    startX = e.clientX;
    startY = e.clientY;
  }
});

document.addEventListener('mousemove', function(e) {
  if (isResizing) {
    var width = draggableElement.offsetWidth + (e.clientX - startX);
    var height = draggableElement.offsetHeight + (e.clientY - startY);
    draggableElement.style.width = width + 'px';
    draggableElement.style.height = height + 'px';
    startX = e.clientX;
    startY = e.clientY;
  }
});

document.addEventListener('mouseup', function() {
  isResizing = false;
});