SOURCE

// 获取可拖动的div元素和旋转手柄
const draggableElement = document.getElementById('draggable');
const rotateHandle = draggableElement.querySelector('.rotate-handle');

// 初始化起始角度
let initialAngle = 0;

// 初始化初始位置
let initialX, initialY;

// 鼠标按下时触发的事件
function dragStart(event) {
  initialX = event.clientX;
  initialY = event.clientY;

  // 添加鼠标移动和释放事件监听器
  document.addEventListener('mousemove', dragMove);
  document.addEventListener('mouseup', dragEnd);
}

// 鼠标移动时触发的事件
function dragMove(event) {
  const deltaX = event.clientX;
  const deltaY = event.clientY;

  // 计算拖动后的新位置
  const newX = deltaX;
  const newY = deltaY;

  // 设置div元素的新位置
  draggableElement.style.left = `${newX}px`;
  draggableElement.style.top = `${newY}px`;
}

// 鼠标释放时触发的事件
function dragEnd() {
  // 移除鼠标移动和释放事件监听器
  document.removeEventListener('mousemove', dragMove);
  document.removeEventListener('mouseup', dragEnd);
}

// 鼠标按下时绑定事件监听器
draggableElement.addEventListener('mousedown', dragStart);

// 旋转手柄按下时的初始位置
let initialRotationAngle;

// 旋转手柄按下时触发的事件
function rotateStart(event) {
  event.stopPropagation();
  initialAngle = getRotationAngle(event.clientX, event.clientY);
//   console.log(initialAngle)
  console.log(initialRotationAngle)
  initialRotationAngle = initialRotationAngle === 'none' ? 0 : getRotationAngle11();

  // 添加鼠标移动和释放事件监听器
  document.addEventListener('mousemove', rotateMove);
  document.addEventListener('mouseup', rotateEnd);
}
function getRotationAngle11() {
  const transform = getComputedStyle(draggableElement).getPropertyValue('transform');
  if (transform && transform !== 'none') {
    const matrix = transform.split('(')[1].split(')')[0].split(',');
    console.log('1',matrix)
    const angle = Math.round(Math.atan2(+matrix[1], +matrix[0]) * (180 / Math.PI));
    console.log('2',angle)
    return angle >= 0 ? angle : angle + 360;
  }
  return 0;
}
// 旋转手柄移动时触发的事件
function rotateMove(event) {
  const currentAngle = getRotationAngle(event.clientX, event.clientY);
  const deltaAngle = currentAngle - initialAngle;

  const newRotationAngle = initialRotationAngle + deltaAngle;
  draggableElement.style.transform = `rotate(${newRotationAngle}deg)`;
}


function getRotationAngle(clientX, clientY) {
  const rect = draggableElement.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  const angle = Math.atan2(clientY - centerY, clientX - centerX) * (180 / Math.PI);
  return angle;
}
// 旋转手柄释放时触发的事件
function rotateEnd() {
  // 移除旋转手柄移动和释放事件监听器
  document.removeEventListener('mousemove', rotateMove);
  document.removeEventListener('mouseup', rotateEnd);
}

// 旋转手柄按下时绑定事件监听器
rotateHandle.addEventListener('mousedown', rotateStart);

<div id="draggable" style="width: 100px; height: 100px; background-color: blue;">
  <div class="rotate-handle"></div>
</div>

#draggable {
  position: absolute;
}

.rotate-handle {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: -10px;
  right: -10px;
  cursor: pointer;
}