div拖拽互换位置

<transition-group tag="div">

            <div

              v-for="(item, index) in targetKeys"

              :key="index"

              ref="list"

              class="option-item"

              draggable="true"

              @dragstart="handleDragStart(item)"

              @dragover.prevent="handleDragOver($event)"

              @dragenter="handleDragEnter($event, item)"

              @dragend="handleDragEnd()"

            >

              <close-outlined @click="closeTargetKey(item, onItemSelect)" />

              <div class="item-info">

                <div class="item-title">{{ getStation(item)?.name }}</div>

                <div class="item-coord">{{ getStation(item)?.coord }}</div>

              </div>

              <unordered-list-outlined :style="{ fontSize: '20px' }" />

            </div>

          </transition-group>

 /**

   * 拖拽方法块

   */

  const dragging = ref();

  function handleDragStart(item: any) {

    dragging.value = item;

  }

  function handleDragEnd() {

    dragging.value = null;

  }

  //首先把div变成可以放置的元素，即重写dragenter/dragover

  function handleDragOver(e: any) {

    e.dataTransfer.dropEffect = 'move'; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!

  }

  function handleDragEnter(e: any, item: any) {

    e.dataTransfer.effectAllowed = 'move'; //为需要移动的元素设置dragstart事件

    if (dragging.value === item) {

      return null;

    }

    const newItems = [...targetKeys.value];

    const src = newItems.indexOf(dragging.value);

    const dst = newItems.indexOf(item);

    newItems.splice(dst, 0, ...newItems.splice(src, 1));

    targetKeys.value = newItems;

    emits('chageTarget');

  }

.option-item {

      background: #ebeff3;

      border-radius: 2px;

      height: 32px;

      width: 100%;

      display: flex;

      align-items: center;

      justify-content: space-between;

      .item-info {

        display: flex;

        align-items: center;

        justify-content: space-between;

        flex: auto;

        padding: 0 10px;

        .item-title {

          font-family: PingFangSC-Regular;

          font-size: 14px;

          color: #272a33;

        }

      }

    }