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

好的，以下是完整的 class 类代码实现，兼容谷歌低版本浏览器：

HTML 代码：

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

<div class="right-container">
  <div class="droppable-container">
    <div class="droppable-item">
      <div class="sortable-container">
        <div class="sortable-item">button 1</div>
        <div class="sortable-item">button 2</div>
        <div class="sortable-item">button 3</div>
      </div>
    </div>
    <div class="droppable-item">
      <div class="sortable-container">
        <div class="sortable-item">button 4</div>
        <div class="sortable-item">button 5</div>
        <div class="sortable-item">button 6</div>
      </div>
    </div>
  </div>
</div>

CSS 代码：

.left-container {
  float: left;
  width: 50%;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.right-container {
  float: right;
  width: 50%;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.droppable-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.droppable-item {
  height: 50%;
  border: 1px solid #ccc;
}

.sortable-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.sortable-item {
  height: 33%;
  border: 1px solid #ccc;
  cursor: move;
}

JavaScript 代码：

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

  init() {
    // 初始化左侧可拖拽元素
    $('.draggable-item').on('dragstart', function(event) {
      event.originalEvent.dataTransfer.setData('text/plain', $(this).text());
    });

    // 初始化右侧容器和可排序按钮
    $('.droppable-item, .sortable-item').on('dragover', function(event) {
      event.preventDefault();
      $(this).addClass('dragover');
    });

    $('.droppable-item, .sortable-item').on('dragleave', function(event) {
      $(this).removeClass('dragover');
    });

    $('.droppable-item').on('drop', function(event) {
      event.preventDefault();
      $(this).removeClass('dragover');
      var draggableItem = event.originalEvent.dataTransfer.getData('text/plain');
      $(this).find('.sortable-container').append('<div class="sortable-item">' + draggableItem + '</div>');
    });

    $('.sortable-container').sortable({
      axis: 'y',
      containment: 'parent',
      cursor: 'move',
      opacity: 0.5
    });
  }
}

new DragAndDrop();

说明：以上代码使用了 jQuery 和 jQuery UI，实现了左侧可拖拽元素，右侧容器和可排序按钮的初始化，以及拖拽和排序的交互效果。同时，使用了 ES6 的 class 类语法，方便代码的封装和重用。