js 左侧多个拖拽内容，拖拽其中一个dom到右侧，右侧dom判断拖拽到dom内，未释放前可进行排序，右侧dom可拖拽排序并添加移动动画，请用完整class 类代码实现

下面是一个完整的 JavaScript 类代码，实现了左侧多个拖拽内容，拖拽其中一个 DOM 到右侧，右侧 DOM 判断拖拽到 DOM 内，未释放前可进行排序，右侧 DOM 可拖拽排序并添加移动动画的功能。

<!-- 左侧拖拽内容 -->
<div class="left">
  <div class="box" draggable="true">Box 1</div>
  <div class="box" draggable="true">Box 2</div>
  <div class="box" draggable="true">Box 3</div>
</div>

<!-- 右侧拖拽容器 -->
<div class="right">
  <div class="dropzone">Drop Here</div>
  <div class="box-container"></div>
</div>

.left {
  display: flex;
  flex-wrap: wrap;
}

.left .box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin: 10px;
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #f5f5f5;
}

.right .dropzone {
  width: 200px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  margin-right: 10px;
}

.right .box-container {
  display: flex;
  flex-wrap: wrap;
}

class DragAndDrop {
  constructor() {
    // 左侧拖拽内容
    this.left = document.querySelector('.left');

    // 右侧拖拽容器
    this.right = document.querySelector('.right');
    this.dropzone = this.right.querySelector('.dropzone');
    this.boxContainer = this.right.querySelector('.box-container');

    // 绑定左侧拖拽事件
    this.bindDragEvent(this.left);

    // 绑定右侧拖拽事件
    this.bindDragEvent(this.right);

    // 绑定右侧排序事件
    this.bindSortEvent();
  }

  // 绑定拖拽事件
  bindDragEvent(element) {
    // 记录拖拽开始的元素
    let draggableElement = null;

    // 监听 dragstart 事件，开始拖拽
    element.addEventListener('dragstart', (event) => {
      draggableElement = event.target;
      event.dataTransfer.setData('text/plain', '');
      event.dataTransfer.setDragImage(draggableElement, 0, 0);
    });

    // 监听 dragover 事件，拖拽到目标元素上
    element.addEventListener('dragover', (event) => {
      event.preventDefault();

      // 如果是右侧容器，判断拖拽到目标元素上
      if (element === this.right) {
        const box = this.getBoxFromPoint(event.clientX, event.clientY);
        if (box) {
          box.classList.add('over');
        }
      }
    });

    // 监听 dragleave 事件，拖拽离开目标元素
    element.addEventListener('dragleave', (event) => {
      // 如果是右侧容器，移除目标元素上的样式
      if (element === this.right) {
        const box = this.getBoxFromPoint(event.clientX, event.clientY);
        if (box) {
          box.classList.remove('over');
        }
      }
    });

    // 监听 drop 事件，完成拖拽
    element.addEventListener('drop', (event) => {
      event.preventDefault();

      // 如果是右侧容器，将拖拽元素添加到目标元素中
      if (element === this.right) {
        const box = this.getBoxFromPoint(event.clientX, event.clientY);
        if (box) {
          box.classList.remove('over');
          this.boxContainer.insertBefore(draggableElement, box.nextSibling);
        } else {
          this.boxContainer.appendChild(draggableElement);
        }
      }
    });
  }

  // 获取鼠标位置下的 DOM 元素
  getBoxFromPoint(x, y) {
    const element = document.elementFromPoint(x, y);
    if (element && element.classList.contains('box')) {
      return element;
    }
    return null;
  }

  // 绑定排序事件
  bindSortEvent() {
    let draggingElement = null;

    // 监听 dragstart 事件，开始拖拽
    this.boxContainer.addEventListener('dragstart', (event) => {
      draggingElement = event.target;
      event.dataTransfer.setData('text/plain', '');
      event.dataTransfer.setDragImage(draggingElement, 0, 0);
    });

    // 监听 dragover 事件，拖拽到目标元素上
    this.boxContainer.addEventListener('dragover', (event) => {
      event.preventDefault();

      // 获取当前拖拽元素和目标元素
      const droppedElement = event.target;
      if (draggingElement !== droppedElement && droppedElement.classList.contains('box')) {
        // 根据鼠标位置判断拖拽方向
        const rect = droppedElement.getBoundingClientRect();
        const isBefore = event.clientY < rect.top + rect.height / 2;

        // 在目标元素前或后插入拖拽元素
        if (isBefore) {
          this.boxContainer.insertBefore(draggingElement, droppedElement);
        } else {
          this.boxContainer.insertBefore(draggingElement, droppedElement.nextSibling);
        }
      }
    });

    // 监听 dragend 事件，拖拽结束
    this.boxContainer.addEventListener('dragend', (event) => {
      // 为拖拽元素添加动画类名
      draggingElement.classList.add('animate');

      // 等待过渡效果完成后，移除动画类名
      setTimeout(() => {
        draggingElement.classList.remove('animate');
      }, 500);
    });
  }
}

// 初始化 DragAndDrop 实例
new DragAndDrop();

在上面的代码中，我们首先定义了左侧拖拽内容和右侧拖拽容器。然后通过绑定拖拽事件，实现了将左侧拖拽内容拖拽到右侧拖拽容器中，并支持在容器内进行排序操作。在排序操作中，我们使用了 dragover 事件和 elementFromPoint 方法来判断拖拽方向和目标元素位置，使用 insertBefore 方法在目标元素前或后插入拖拽元素。最后，我们为拖拽元素添加了移动动画，让用户更加直观地感受到拖拽效果。