前端：通过拖拽与拷贝将项目外的图片复制到项目内，自定义复制的数据。

是默语呀

已于 2024-07-01 13:47:13 修改

阅读量368

点赞数 9

文章标签：前端 javascript vue

于 2023-11-10 09:56:56 首次发布

本文链接：https://blog.csdn.net/m0_46924916/article/details/134324929

版权

 <!-- 首先就是要准备拖拽容器,这里先介绍一下:{
[拖拽源事件]
    dragstart--用户开始拖动元素的时候触发
    drag--正在拖动的时候触发
    dragend--结束拖动的时候触发
[目标容器事件]
    dragenter -- 进入容器范围内触发
    dragover --  被拖动的对象在其容器范围内拖动
    dragleave -- 被拖动的对象在 离开容器范围时触发
    drop -- 被释放鼠标时触发 -- 此事件若要运行需在 dragover  事件中阻止默认行为
}
正常情况下需要再拖拽源上加上H5语法draggable = true，
但图像、链接和选择的文本默认的可执行拖拽行为，而从外部拖拽图片正好有这个行为，所以可以忽略。
 -->
<div 
 @dragover="(e) => e.preventDefault()"
 @drop="onDrop($event)">
<div>

接下来就要实现js部分了

methods: {
    async onDrop(e) {
         e.preventDefault() // 阻止默认行为
         const file = e.dataTransfer.files[0] // 拿到图片信息
          if ( /image/.test(file.type)) {
          let url = await getImageDataURL(file) // 将图片转换为base64
          
          // 这里拿到路径后你就可以执行你的操作逻辑了，
          // 你可以直接将base64路径放到img标签的url里面
           // 之后你可以用e.offsetX与e.offsetY减去图片宽高的一半来实现鼠标在图片中心
        }
    }
}

// 将图片转换为base64
const getImageDataURL = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.addEventListener("load", (e) => {
      resolve(reader.result)
    })
  })
}

接下来就是复制部分了，一样的思路,首先你需要在容器上添加paste事件来接收你的粘贴行为

 <template>
    <div id='app'>
        <div class="container" contenteditable="true"></div>
    </div>
 </template>

<script>
    export default {
     mounted() {
       document.querySelector('.container').addEventListener('paste', this.onPaste)
    },
    methods: {
       async onPaste(e) {
        const file = e.clipboardData.files[0] // 获取图片信息
        if ( /image/.test(file.type)) {
          let url =  await getImageDataURL(file)
         // 拿到路径执行你的逻辑
      }
    },
    },
beforeDestroy() {
 document.querySelector('.container').removeEventListener('paste', this.onPaste)

}
  }
</script>

复制项目内元素的数据（可以将数据复制到其他项目）

<div @copy="onCopy"></div>

methods: {
    onCopy() {
    // 第一步是找到数据，你可以利用find找到那一项
     let data = this.List.find(item => item.focused === true)
    // 第二步修改进剪切板
       navigator.clipboard.writeText(JSON.stringify(data))
     // 之后ctrl + c 就可以复制，ctrl + v 就粘贴你想要粘贴的数据了
    }
}