<template>
<div class="wrap">
<div class="list-wrap">
<div class="list">
<div class="list-item" draggable="true" v-for="item of list" :key="item">
{{ item }}
</div>
</div>
</div>
<div class="drag-place">
<div id="drop" class="input"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: new Array(100).fill(0).map((item, index) => index + 1)
}
},
mounted() {
var dragResult = false;
// 被放置元素的事件设置
let place = document.getElementById('drop');
place.ondragover = (ev) => {
ev.preventDefault();
}
place.ondrop = (ev) => {
ev.preventDefault();
ev.stopPropagation();
let data = ev.dataTransfer.getData("Text");
let div = document.createElement('div')
div.innerText = data
div.className = 'block'
place.appendChild(div);
dragResult = true;
}
// 拖动元素的事件设置
let list = document.getElementsByClassName('list')[0];
let arr_li = document.getElementsByClassName('list-item');
for (let i = 0; i < arr_li.length; i++) {
arr_li[i].ondragstart = function(ev) {
this.className = 'list-item opacity';
this.setAttribute('disabled', true);
// 设置这个属性被放置对象就可以从这里面取到值
ev.dataTransfer.setData("Text", ev.target.innerText);
}
// 拖动过程中触发
arr_li[i].ondrag = function() {}
// 拖动结束触发
arr_li[i].ondragend = function(ev) {
const target = ev.target;
// 通过一个全局变量判断是否拖放成功
if (!dragResult) {
// 拖放失败把opacity状态去除
target.className = 'list-item';
} else {
list.removeChild(target);
dragResult = false;
}
}
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.opacity {
opacity: 0.2;
}
.wrap {
display: flex;
}
.list-wrap {
width: 300px;
height: 600px;
flex: 1
}
.list {
width: 100%;
}
.list-item {
width: 100%;
height: 50px;
line-height: 20px;
border: 1px solid red;
}
.drag-place {
flex: 1;
}
.input {
width: 50%;
min-height: 30px;
float: right;
border: 1px solid red;
}
.block {
width: 20px;
line-height: 20px;
border: 1px solid lightblue;
}
</style>
Blog: 做了个简单的h5拖动demo
最新推荐文章于 2022-10-29 11:07:57 发布