利用vue和element-ui ,实现需求 :1个div包含两个i标签,每个i标签里面有一个icon,div的功能可以拖拽。请用具体代码来实现
时间: 2024-02-26 12:57:44 浏览: 20
好的,以下是实现该需求的具体代码:
```html
<template>
<div class="drag-box" ref="dragBox">
<div class="drag-content">
<i class="el-icon-edit" @click="edit"></i>
<i class="el-icon-delete" @click="delete"></i>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 记录鼠标点击时的位置
startX: 0,
startY: 0,
// 记录拖拽框当前的位置
left: 0,
top: 0,
};
},
mounted() {
// 给拖拽框绑定 mousedown 事件
this.$refs.dragBox.addEventListener("mousedown", this.handleMouseDown);
},
beforeDestroy() {
// 组件销毁前解绑事件
this.$refs.dragBox.removeEventListener("mousedown", this.handleMouseDown);
},
methods: {
handleMouseDown(e) {
// 记录鼠标点击时的位置
this.startX = e.clientX - this.$refs.dragBox.offsetLeft;
this.startY = e.clientY - this.$refs.dragBox.offsetTop;
// 给 document 绑定 mousemove 和 mouseup 事件
document.addEventListener("mousemove", this.handleMouseMove);
document.addEventListener("mouseup", this.handleMouseUp);
},
handleMouseMove(e) {
// 计算拖拽框的新位置
this.left = e.clientX - this.startX;
this.top = e.clientY - this.startY;
// 更新拖拽框的样式
this.$refs.dragBox.style.left = this.left + "px";
this.$refs.dragBox.style.top = this.top + "px";
},
handleMouseUp() {
// 解绑 mousemove 和 mouseup 事件
document.removeEventListener("mousemove", this.handleMouseMove);
document.removeEventListener("mouseup", this.handleMouseUp);
},
edit() {
// TODO: 编辑操作
},
delete() {
// TODO: 删除操作
},
},
};
</script>
<style>
.drag-box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
}
.drag-content {
position: relative;
width: 100%;
height: 100%;
}
.drag-content i {
position: absolute;
cursor: pointer;
}
.drag-content .el-icon-edit {
top: 10px;
left: 10px;
}
.drag-content .el-icon-delete {
top: 10px;
right: 10px;
}
</style>
```
以上代码中,我们使用了 Vue 和 Element UI,通过给拖拽框绑定 mousedown 事件、在 document 上绑定 mousemove 和 mouseup 事件,实现了拖拽功能。同时,我们在 div 中嵌套两个 i 标签,通过绑定 click 事件实现了编辑和删除操作。