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

以下是一个完整的示例代码，包括HTML、CSS和JavaScript：

HTML代码：

<div class="left-container">
  <div class="draggable" draggable="true">拖拽元素1</div>
  <div class="draggable" draggable="true">拖拽元素2</div>
  <div class="draggable" draggable="true">拖拽元素3</div>
</div>
<div class="right-container">
  <div class="dropzone">拖拽到此处排序</div>
</div>

CSS代码：

.left-container {
  display: flex;
  flex-direction: column;
}

.draggable {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  cursor: move;
}

.right-container {
  border: 1px solid #ccc;
  height: 100px;
  margin-top: 10px;
  padding: 10px;
}

.dropzone {
  border: 1px dashed #ccc;
  height: 100%;
}
.dropzone.dragover {
  background-color: #eee;
}

.dragging {
  opacity: 0.5;
}

JavaScript代码：

const leftContainer = document.querySelector('.left-container');
const draggableList = leftContainer.querySelectorAll('.draggable');
const rightContainer = document.querySelector('.right-container');
const dropzone = rightContainer.querySelector('.dropzone');

let draggingElement = null;

draggableList.forEach(draggable => {
  draggable.addEventListener('dragstart', onDragStart);
  draggable.addEventListener('mousedown', onMouseDown);
});

dropzone.addEventListener('dragover', onDragOver);
dropzone.addEventListener('drop', onDrop);
dropzone.addEventListener('dragleave', onDragLeave);

function onDragStart(event) {
  const id = event.target.id;
  const index = Array.from(event.target.parentNode.children).indexOf(event.target);

  event.dataTransfer.setData('text/plain', id);
  event.dataTransfer.setData('index', index);
}

function onDragOver(event) {
  event.preventDefault();

  const target = event.target;
  const draggable = draggingElement;

  if (target.classList.contains('dropzone')) {
    target.classList.add('dragover');
  }
}

function onDrop(event) {
  event.preventDefault();

  const id = event.dataTransfer.getData('text/plain');
  const index = event.dataTransfer.getData('index');
  const draggable = document.getElementById(id);
  const dropzone = event.target;

  if (dropzone.classList.contains('dropzone')) {
    dropzone.classList.remove('dragover');
    dropzone.appendChild(draggable);

    if (draggingElement !== null && draggingElement !== draggable) {
      const parent = draggingElement.parentNode;
      parent.insertBefore(draggable, draggingElement);
    }

    draggingElement = null;
  }
}

function onDragLeave(event) {
  const target = event.target;

  if (target.classList.contains('dropzone')) {
    target.classList.remove('dragover');
  }
}

function onMouseDown(event) {
  const target = event.target;
  draggingElement = target;
  target.classList.add('dragging');
}

在这个示例中，左侧的拖拽元素具有`.draggable`类和`draggable="true"`属性，右侧的DOM元素具有`.dropzone`类。在JavaScript代码中，通过`querySelector`和`querySelectorAll`获取DOM元素，然后添加事件监听器。在`onMouseDown`事件处理函数中，设置`draggingElement`变量为当前拖拽的元素，并添加`.dragging`类来修改样式。在`onDragStart`事件处理函数中，设置拖拽数据，包括元素id和位置。在`onDragOver`事件处理函数中，判断拖拽元素是否在右侧DOM元素内部，并添加`.dragover`类来修改样式。在`onDrop`事件处理函数中，获取拖拽数据，将拖拽元素添加到右侧DOM元素内部，并进行排序操作。最后在`onDragLeave`事件处理函数中，移除`.dragover`类来修改样式。

需要注意的是，在`onDrop`事件处理函数中，需要判断`draggingElement`变量是否为`null`和是否和当前拖拽的元素相同，如果不同则进行排序操作。另外，在排序操作中，可以使用`insertBefore`方法将被拖拽元素插入到拖拽结束时的位置。