js 左侧多个拖拽内容，拖拽其中一个dom到右侧，右侧dom判断拖拽到dom内，未释放前可进行排序

可以使用HTML5的Drag and Drop API来实现这个功能。首先需要给左侧的拖拽内容添加`draggable="true"`属性，表示可以被拖拽。然后在左侧的拖拽元素上添加`dragstart`事件监听器，在事件处理函数里设置拖拽数据，例如：拖拽的元素id、位置等，可以使用`event.dataTransfer.setData()`方法设置拖拽数据。

接着，在右侧的DOM元素上添加`dragover`事件监听器，在事件处理函数里调用`event.preventDefault()`方法阻止默认行为，表示可以放置拖拽元素。在`dragover`事件处理函数里，可以根据鼠标位置判断拖拽元素是否在右侧DOM元素内部，如果在则添加`dragover`时的样式。

当拖拽元素释放时，会触发`drop`事件，可以在`drop`事件处理函数里获取拖拽数据，例如：拖拽元素id、位置等，然后根据拖拽数据进行排序操作。

最后在右侧DOM元素上添加`dragleave`事件监听器，表示拖拽元素离开右侧DOM元素时，需要移除`dragover`时的样式。

示例代码如下：

// 左侧拖拽元素的dragstart事件处理函数
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);
}

// 右侧DOM元素的dragover事件处理函数
function onDragOver(event) {
  event.preventDefault();

  const target = event.target;
  const draggable = document.querySelector('.dragging');

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

// 右侧DOM元素的drop事件处理函数
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);
  }
}

// 右侧DOM元素的dragleave事件处理函数
function onDragLeave(event) {
  const target = event.target;

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

// 左侧拖拽元素的dragend事件处理函数
function onDragEnd(event) {
  const target = event.target;

  target.classList.remove('dragging');
}

// 左侧拖拽元素的mousedown事件处理函数
function onMouseDown(event) {
  const target = event.target;

  target.classList.add('dragging');
}

需要注意的是，为了方便拖拽元素的样式修改，可以在CSS中添加`.dragging`和`.dragover`两个类，并在对应的事件处理函数里添加或移除这两个类来修改样式。