Vue3DraggableResizable-多选复制粘贴

<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>