JavaScriptでドラッグアンドドロップ機能を実装するにはどうすればよいですか?

拖拽我

.drag-element {
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

// 获取目标元素
var dragElement = document.querySelector('.drag-element');

var isActive = false;
var initialX, initialY, offsetX, offsetY;

// 鼠标按下事件
dragElement.addEventListener('mousedown', function(e) {
  isActive = true;
  initialX = e.clientX;
  initialY = e.clientY;
  offsetX = e.offsetX;
  offsetY = e.offsetY;
});

// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
  if (isActive) {
    e.preventDefault();

    var currentX = e.clientX - initialX;
    var currentY = e.clientY - initialY;

    // 设置目标元素的位置
    dragElement.style.transform = 'translate(' + currentX + 'px, ' + currentY + 'px)';
  }
});

// 鼠标释放事件
document.addEventListener('mouseup', function(e) {
  isActive = false;
});