js 左侧多个拖拽内容，拖拽其中一个dom到右侧，右侧dom判断拖拽到dom内即可排序展示拖拽内容

你可以使用HTML5中的拖放API来实现这个功能。首先，你需要为左侧的每个拖拽内容添加一个draggable属性，然后创建一个拖拽事件处理函数。在这个处理函数中，你需要设置拖拽的数据和拖拽时的样式（例如，透明度或阴影）。当拖拽结束时，你需要将数据传递给右侧的dom元素，并根据需要重新排序展示拖拽内容。

具体实现方法可以参考下面的代码示例：

<!-- 左侧拖拽内容 -->
<div class="draggable" draggable="true">拖拽内容1</div>
<div class="draggable" draggable="true">拖拽内容2</div>
<div class="draggable" draggable="true">拖拽内容3</div>

<!-- 右侧dom -->
<div class="dropzone">拖拽到这里排序展示</div>

// 获取左侧所有拖拽内容
const draggables = document.querySelectorAll('.draggable');

// 给每个拖拽内容添加拖拽事件处理函数
draggables.forEach(draggable => {
  draggable.addEventListener('dragstart', () => {
    // 设置拖拽的数据和样式
    draggable.classList.add('dragging');
    const data = draggable.textContent;
    event.dataTransfer.setData('text/plain', data);
  });

  draggable.addEventListener('dragend', () => {
    // 拖拽结束后移除样式
    draggable.classList.remove('dragging');
  });
});

// 获取右侧dom
const dropzone = document.querySelector('.dropzone');

// 右侧dom添加拖拽事件处理函数
dropzone.addEventListener('dragover', event => {
  event.preventDefault();
});

dropzone.addEventListener('drop', event => {
  event.preventDefault();
  // 获取拖拽的数据
  const data = event.dataTransfer.getData('text/plain');
  // 将数据添加到右侧dom中并重新排序展示
  const newItem = document.createElement('div');
  newItem.textContent = data;
  dropzone.appendChild(newItem);
});

其中，我们为左侧的每个拖拽内容添加了draggable属性，并分别为它们添加了dragstart和dragend事件处理函数。在dragstart事件处理函数中，我们设置了拖拽的数据和样式；在dragend事件处理函数中，我们移除了样式。对于右侧的dom元素，我们为它添加了dragover和drop事件处理函数，用来处理拖拽结束后的逻辑。在drop事件处理函数中，我们获取拖拽的数据并将它添加到右侧dom中。