被拖拽的节点

dragable="true"

@dragstart="drag"

拖入的节点

@drop="drop"

@dragover="dragover"

@dragleave="dragleave"

                <!-- 被拖拽的 -->
                <div
                  v-for="o in item.staffs"
                  :key="o.id"
                  :class="[`${o.account}`]"
                  draggable="true"
                  @dragstart="drag"
                >
                  <span :class="[`${o.account}`]" style="text-align: center">
                    {{ o.name }}
                  </span>
                </div>

                    <!-- 拖入的 -->
                    <div
                      :id="`${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}_${
                        item.startTime
                      }_${item.id}`"
                      class="dropBanci"
                      @drop="drop"
                      @dragover="dragover"
                      @dragleave="dragleave"
                    >
                   </div>

    const drag = (ev: any) => {
      ev.dataTransfer.setData('text', ev.target.className);
      state.nowDragClass = ev.target.className;

      ev.dataTransfer.setData('parentId', ev.target.parentElement.id);
      state.parentClass = ev.target.parentElement.id;
    };

    // dragover dragleave 无法获取ev.target.setData的值
    // 所以在drag 中 存入了变量nowDragClass parentClass 
    const dragover = (ev: any) => {
      let tempArr = ev.target.id.split('_');
      ev.preventDefault();
      ev.target.style.background = '#e5e5fa';
    };

    const dragleave = (ev: any) => {
      ev.target.style.background = '';
    };

    // drop 中可以获取ev.target.setData的值
    const drop = (ev: any) => {
      let tempArr = ev.target.id.split('_');
      let parent = ev.dataTransfer.getData('parentId');
      let data = ev.dataTransfer.getData('text').split(' ');
      ev.target.style.background = '';
      state.parentClass = null;
      state.nowDragClass = null;
    };

drag和drop可以作用在同一节点上

                        <span
                          v-for="(o, i) in item.staffs"
                          :key="i"
                          :class="[`${o.account}`]"
                          style="cursor: move"
                          draggable="true"
                          @dragstart.stop="drag"
                          @drop.stop="dropSpan"
                          @dragover.stop="dragoverSpan"
                          @dragleave.stop="dragleaveSpan"
                        >
                          {{ o.name }}
                        </span>