<template>
<div id="app">
<div class="parent" @dblclick="handleClick">
<DraggableContainer >
<Vue3DraggableResizable
v-for="element,ei in element.list" :key="ei"
:parent="false"
:initW="element.w"
:initH="element.h"
v-model:x="element.x"
v-model:y="element.y"
v-model:w="element.w"
v-model:h="element.h"
@drag-start="onDragStart(element)"
@dragging="onDragging"
:draggable="true"
:resizable="true"
v-model:active="element.active"
@activated="onActivated(element)"
@deactivated="onDeactivated(element)"
classNameActive="active"
:classNameHandle="element.selectHandleName"
:zIndex="element.zIndex"
:class="element.selectStyleName"
>
{{ element.name }}
<!-- {{ element.x }}
{{ element.y }}
{{ element.ctrl }}
{{ element.active }}
{{ ctrl }} -->
</Vue3DraggableResizable>
</DraggableContainer>
</div>
</div>
</template>
<script setup>
const element=ref(
{
id:2,
title:'问我问',
isClone:false,
list:[
{name: "问我问1", id: 3, type:2, zIndex: 1, initW: 200, initH: 40, x: 110, y: 110, w: 150, h: 80, active:false, isClone:false,ctrl:false,selectStyleName:'noSelectedStyle',selectHandleName:'noSelectHandle',
isShowName:true, pointName:"问我问1", pointValue:"35.7", pointUnit:"℃", pointKey:'130_xnjd_YC_1_wd',
angle:0, opacity: 1, backgroundColor: "rgba(18, 127, 233, 0)", borderRadius:0,
fontSize:14, fontColor:"#FFF", fontWeight:100,},
{name: "问我问2", id: 4, type:2, zIndex: 1, initW: 200, initH: 40, x: 310, y: 110, w: 150, h: 80, active:false, isClone:false,ctrl:false,selectStyleName:'noSelectedStyle',selectHandleName:'noSelectHandle',
isShowName:true, pointName:"问我问2", pointValue:"80", pointUnit:"%Rh", pointKey:'130_xnjd_YC_1_yl',
angle:0, opacity: 1, backgroundColor: "rgba(18, 127, 233, 0)", borderRadius:0,
fontSize:14, fontColor:"#FFF", fontWeight:100,},
{name: "问我问3", id: 4, type:2, zIndex: 1, initW: 200, initH: 40, x: 510, y: 110, w: 150, h: 80, active:false, isClone:false,ctrl:false,selectStyleName:'noSelectedStyle',selectHandleName:'noSelectHandle',
isShowName:true, pointName:"问我问3", pointValue:"80", pointUnit:"%Rh", pointKey:'130_xnjd_YC_1_yl',
angle:0, opacity: 1, backgroundColor: "rgba(18, 127, 233, 0)", borderRadius:0,
fontSize:14, fontColor:"#FFF", fontWeight:100,},
],
},
)
const dragItem=ref(null)
const onDragStart = (element) => {
// console.log("onDragStart");
// console.log(element);
dragItem.value=element
dragItem.value.selectStyleName = 'selectedStyle'
dragItem.value.selectHandleName = 'selectedHandle'
}
const onDragging = (v) => {
// console.log("onDragging");
const x=dragItem.value.x - v.x
const y=dragItem.value.y - v.y
console.log(dragItem.value.x,dragItem.value.y);
element.value.list.forEach((el) => {
if (el.ctrl) {
el.x -= x;
el.y -= y;
}
});
};
const ctrl=ref(false)
document.addEventListener("keydown", function(event) {
if (event.keyCode === 17) {
console.log("触发了Ctrl键事件");
ctrl.value=true
dragItem.value.ctrl = true
dragItem.value.selectStyleName = 'selectedStyle'
dragItem.value.selectHandleName = 'selectedHandle'
}
});
const ctrlTrueItems=ref(null)
document.addEventListener("copy", function(event) {
console.log("执行了复制操作");
// 深拷贝到新数组
const deepCopyArray = JSON.parse(JSON.stringify(element.value.list));
// 过滤出ctrl=true的项
ctrlTrueItems.value = deepCopyArray.filter(item => item.ctrl === true);
ctrlTrueItems.value.map(item=>{
item.x+=10
item.y+=10
})
});
document.addEventListener("paste", function(event) {
// 执行您想要的操作
console.log("执行了粘贴操作");
// 在这里可以调用其他函数或执行其他操作
element.value.list.map(el=>{
el.ctrl=false
el.active=false
})
element.value.list.push(...ctrlTrueItems.value);
});
const onActivated = (v) =>{
console.log('onActivated');
console.log(element.value.list);
// v.selectStyleName = 'selectedStyle'
// v.selectHandleName = 'selectedHandle'
}
const onDeactivated = (v) =>{
console.log('onDeactivated');
console.log(v.name);
console.log(v.ctrl);
console.log(v);
// if (!v.ctrl) { // 仅当 v.ctrl 为 false 时才将元素设置为活跃状态
// v.active = true;
// }
if (!v.ctrl) {
v.selectStyleName = 'noSelectStyle'
v.selectHandleName = 'noSelectHandle'
}
}
const handleClick = () => {
console.log('handleClick,');
element.value.list.map(el=>{
el.ctrl=false
el.active=false
el.selectStyleName = 'noSelectStyle'
el.selectHandleName = 'noSelectHandle'
})
}
</script>
<style>
.parent {
width: 1200px;
height: 600px;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
user-select: none;
background: #FFF;
}
.selectedHandle{
display: block !important;
}
.noSelectHandle{
display: none !important;
}
.selectedStyle{
border-color: #000;
border-style: dashed;
}
.noSelectStyle{
border-color: rgb(38, 11, 210);
border-style: dashed;
}
</style>
Vue3DraggableResizable-多选复制粘贴
最新推荐文章于 2024-08-05 14:51:38 发布