拖拽跨列表

<template>
  <div class="drag">
    <div id="box">
      <span>{{ boxNum }}</span>
    </div>
    <ul id="con">
      <span>{{ conNum }}</span>
      <li>java</li>
      <li>js</li>
      <li>html5</li>
      <li>css3</li>
    </ul>
    <div id="son">
      <span>{{ sonNum }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const boxNum = ref(0);
const conNum = ref(0);
const sonNum = ref(0);
window.onload = function () {
  var box = document.getElementById("box");
  var con = document.getElementById("con");
  var lis = document.getElementsByTagName("li");
  boxNum.value = box.childElementCount - 1;
  conNum.value = con.childElementCount - 1;
  sonNum.value = son.childElementCount - 1;
  for (var i = 0; i < lis.length; i++) {
    lis[i].draggable = true;
    lis[i].flag = false;
    lis[i].ondragstart = function () {
      this.flag = true;
    };
    lis[i].ondragend = function () {
      this.flag = false;
    };
  }

  box.ondragenter = function (e) {
    e.preventDefault();
  };
  box.ondragover = function (e) {
    e.preventDefault();
  };
  box.ondragleave = function (e) {
    e.preventDefault();
  };
  box.ondrop = function (e) {
    for (var i = 0; i < lis.length; i++) {
      if (lis[i].flag) {
        box.appendChild(lis[i]);
      }
    }
    boxNum.value = box.childElementCount - 1;
    boxNum.value = box.childElementCount - 1;
    conNum.value = con.childElementCount - 1;
    sonNum.value = son.childElementCount - 1;
    sonNum.value = son.childElementCount - 1;
    console.log(box.childElementCount, "box");
    e.preventDefault();
  };

  con.ondragenter = function (e) {
    e.preventDefault();
  };
  con.ondragover = function (e) {
    e.preventDefault();
  };
  con.ondragleave = function (e) {
    e.preventDefault();
  };
  con.ondrop = function (e) {
    for (var i = 0; i < lis.length; i++) {
      if (lis[i].flag) {
        con.appendChild(lis[i]);
      }
    }
    boxNum.value = box.childElementCount - 1;
    conNum.value = con.childElementCount - 1;
    sonNum.value = son.childElementCount - 1;
    console.log(con.childElementCount, "con");
    e.preventDefault();
  };
  son.ondragenter = function (e) {
    e.preventDefault();
  };
  son.ondragover = function (e) {
    e.preventDefault();
  };
  son.ondragleave = function (e) {
    e.preventDefault();
  };
  son.ondrop = function (e) {
    for (var i = 0; i < lis.length; i++) {
      if (lis[i].flag) {
        son.appendChild(lis[i]);
      }
    }
    boxNum.value = box.childElementCount - 1;
    conNum.value = con.childElementCount - 1;
    sonNum.value = son.childElementCount - 1;
    console.log(son.childElementCount, "son");
    e.preventDefault();
  };
};
</script>

<style scoped>
.drag {
  display: flex;
}
#box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#con {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  list-style: none;
  padding: 0;
  margin: 0;
}
#son {
  width: 200px;
  height: 200px;
  border: 1px solid pink;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  width: 150px;
  height: 30px;
  margin: 5px 0;
  background: #ccc;
  line-height: 30px;
  text-align: center;
  list-style: none;
}
</style>

拖拽效果