<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>
拖拽效果