js 左侧多个拖拽内容，拖拽其中一个dom到右侧，左侧dom不减少，右侧dom判断拖拽到dom内，未释放前可进行排序，右侧dom有多层结构,并且每层有个可以拖拽的按钮，鼠标移动上去即可拖拽排序，右侧dom可拖拽排序并添加移动动画，请用完整class 类代码完整实现，不使用第三方插件

好的，以下是不使用第三方插件的完整class代码实现：

class DragAndDrop {
  constructor() {
    this.init();
  }

  init() {
    // 初始化左侧拖拽
    const leftItems = document.querySelectorAll('.left .item');
    leftItems.forEach(item => {
      item.addEventListener('dragstart', this.handleDragStart.bind(this));
    });

    // 初始化右侧拖拽和排序
    const rightGroups = document.querySelectorAll('.right .group');
    rightGroups.forEach(group => {
      const items = group.querySelector('.items');
      items.addEventListener('dragover', this.handleDragOver.bind(this));
      items.addEventListener('drop', this.handleDrop.bind(this));
      items.addEventListener('dragend', this.handleDragEnd.bind(this));
      const sortBtn = group.querySelector('.sort-btn');
      if (sortBtn) {
        sortBtn.addEventListener('mousedown', this.handleSortStart.bind(this));
      }
    });
  }

  handleDragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.dataset.id);
  }

  handleDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }

  handleDrop(event) {
    event.preventDefault();
    const id = event.dataTransfer.getData('text/plain');
    const item = document.createElement('div');
    item.classList.add('item');
    item.dataset.id = id;
    item.innerText = `Item ${id}`;
    event.target.appendChild(item);
  }

  handleDragEnd(event) {
    event.target.querySelectorAll('.item').forEach(item => {
      item.classList.remove('over');
    });
  }

  handleSortStart(event) {
    event.preventDefault();
    const group = event.target.closest('.group');
    group.querySelectorAll('.item').forEach(item => {
      item.draggable = true;
      item.addEventListener('dragstart', this.handleSortDragStart.bind(this));
      item.addEventListener('dragend', this.handleSortDragEnd.bind(this));
      item.classList.add('sortable');
    });
  }

  handleSortDragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.dataset.id);
    event.target.classList.add('dragging');
  }

  handleSortDragEnd(event) {
    event.target.classList.remove('dragging');
    event.target.classList.remove('sortable');
  }
}

new DragAndDrop();

HTML代码：

<div class="left">
  <div class="item" draggable="true" data-id="1">Item 1</div>
  <div class="item" draggable="true" data-id="2">Item 2</div>
  <div class="item" draggable="true" data-id="3">Item 3</div>
</div>
<div class="right">
  <div class="group">
    <div class="title">Group 1</div>
    <div class="sort-btn">Sort</div>
    <div class="items"></div>
  </div>
  <div class="group">
    <div class="title">Group 2</div>
    <div class="sort-btn">Sort</div>
    <div class="items"></div>
  </div>
</div>

CSS代码：

.left {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
}

.left .item {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.right {
  display: flex;
  flex-direction: column;
}

.right .group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.right .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.right .sort-btn {
  margin-bottom: 10px;
  cursor: pointer;
}

.right .items {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
}

.right .item {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: move;
  opacity: 0.8;
  transition: transform 0.5s ease;
}

.right .item.sortable {
  cursor: grab;
}

.right .item.dragging {
  opacity: 0;
}

.right .item.over {
  background-color: #eee;
}

.right .item.dropped {
  transform: scale(1.1);
}

说明：

- 左侧拖拽：通过给每个可拖拽的元素绑定`dragstart`事件来设置传输数据。
- 右侧拖拽和排序：通过给每个拖拽区域绑定`dragover`和`drop`事件来实现拖拽、放置和排序功能。通过给排序按钮绑定事件来启用/禁用拖拽排序功能。
- 右侧拖拽动画：通过设置样式来实现拖拽动画，包括鼠标悬停样式、拖拽样式、拖拽结束样式和放置样式。

注意：

- 在`handleDragEnd`方法中需要将所有拖拽区域的所有元素的`over`类名删除，以避免出现错误。
- 在`handleSortStart`方法中需要给所有可排序的元素绑定`dragstart`和`dragend`事件，同时添加`sortable`类名，以便在`handleSortDragStart`和`handleSortDragEnd`方法中切换样式。