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

以下是一个可能的实现方式，包括左侧和右侧的 DOM 结构和相应的 JavaScript 代码：

HTML：

<div class="left-container">
  <div class="draggable-item">Item 1</div>
  <div class="draggable-item">Item 2</div>
  <div class="draggable-item">Item 3</div>
</div>

<div class="right-container">
  <div class="droppable-item">
    <div class="draggable-item">Right Item 1</div>
    <div class="draggable-item">Right Item 2</div>
    <div class="draggable-item">Right Item 3</div>
  </div>
</div>

JavaScript：

// 左侧可拖拽元素
const draggableItems = document.querySelectorAll('.draggable-item');

draggableItems.forEach(item => {
  item.setAttribute('draggable', true); // 设置为可拖拽
  item.addEventListener('dragstart', dragStart); // 拖拽开始事件
});

function dragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id); // 将被拖拽元素的 ID 传递给 setData 方法
}

// 右侧可排序和接收拖拽元素的容器
const droppableItems = document.querySelector('.droppable-item');

droppableItems.addEventListener('dragover', dragOver); // 拖拽到容器上方时触发的事件
droppableItems.addEventListener('drop', drop); // 拖拽完成时触发的事件

function dragOver(event) {
  event.preventDefault(); // 防止浏览器默认行为
  const afterElement = getDragAfterElement(droppableItems, event.clientY); // 获取拖拽到容器中的位置
  const draggableItem = document.querySelector('.dragging'); // 获取正在拖拽的元素
  if (afterElement == null) {
    droppableItems.appendChild(draggableItem); // 如果拖拽到最后，则直接添加到容器末尾
  } else {
    droppableItems.insertBefore(draggableItem, afterElement); // 否则插入到对应位置
  }
}

function drop(event) {
  event.preventDefault(); // 防止浏览器默认行为
  const droppedItemId = event.dataTransfer.getData('text/plain'); // 获取被拖拽元素的 ID
  const droppedItem = document.getElementById(droppedItemId); // 根据 ID 获取被拖拽元素
  const afterElement = getDragAfterElement(droppableItems, event.clientY); // 获取拖拽到容器中的位置
  if (afterElement == null) {
    droppableItems.appendChild(droppedItem); // 如果拖拽到最后，则直接添加到容器末尾
  } else {
    droppableItems.insertBefore(droppedItem, afterElement); // 否则插入到对应位置
  }
}

// 获取拖拽到容器中的位置
function getDragAfterElement(container, y) {
  const draggableElements = [...container.querySelectorAll('.draggable-item:not(.dragging)')]; // 获取容器内的元素，除去正在拖拽的元素
  return draggableElements.reduce((closest, child) => {
    const box = child.getBoundingClientRect(); // 获取元素的位置信息
    const offset = y - box.top - box.height / 2; // 计算鼠标位置和元素中心的距离
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child }; // 如果距离更小，则更新最近的元素
    } else {
      return closest;
    }
  }, { offset: Number.NEGATIVE_INFINITY }).element; // 初始化为一个极小值
}

这段代码实现了左侧多个可拖拽元素到右侧容器中，右侧容器支持拖拽排序和接收拖拽元素。当一个元素被拖拽到右侧容器中时，它会被插入到对应的位置，可以通过拖拽进行排序。