vue+element实现跨区域复制拖放、ondrop、ondragover、ondragstart、draggable、preventDefault、includes、getData

代码

html部分

<div id="app"> <div style="margin-left: 60px;">  <div>  <div style="margin: 20px 0; padding: 12px 0;" v-for="(item, i) in fileS" :key="item.id" :i=`${i}` ondrop="drop(event)" ondragover="allowDrop(event)"> <div style="font-weight: 700; cursor: pointer;" :i=`${i}` @click="openOff(i)"> <span :i=`${i}`>{{item.title}}{items}} <div style="margin-top: 20px; border-top: 1px solid #333;"> <div style="margin-top: 10px; cursor: pointer; color: #000;" v-for="item in 7" :id=`drag${item}` draggable="true" ondragstart="drag(event)"> 源数据 {{item}} el: "#app", data() { return { fileS: [ { id: 1, title: "文件夹1", divs: [], isShow: false }, { id: 2, title: "文件夹2", divs: [], isShow: false }, { id: 3, title: "文件夹3", divs: [], isShow: false } ] } }, methods: { openOff(i) { for (let is = 0; is < this.fileS.length; is++) { if (i == is && !this.fileS[is].isShow) { this.fileS[is].isShow = true; } else { this.fileS[is].isShow = false; } } } } }); // 移动 function allowDrop(ev) { ev.preventDefault(); }; // 拖 function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); }; // 放 function drop(ev) { let data = ev.dataTransfer.getData("Text"), i = ev.path[1].getAttribute("i"), text = document.getElementById(data).cloneNode(true).innerText.trim(); if (i == null) return alert('请放置在文件名上'); if (app.fileS[i].divs.includes(text)) return alert('不能放重复数据'); app.fileS[i].divs.push(text); for (let is = 0; is < app.fileS.length; is++) { if (i == is) { app.fileS[is].isShow = true; } else { app.fileS[is].isShow = false; } } }; 

push

MDN

push方法将指定的元素添加到数组的末尾，并返回新的数组长度。

w3school

push方法向数组末尾添加新项目，并返回新长度。 新的项目将被添加到数组的末尾。 push方法会改变数组的长度。 如需在数组的开头添加项目，请使用unshift方法。

includes

MDN

includes方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

w3school

includes方法确定数组是否包含指定的元素。 如果数组包含元素，则此方法返回true，否则返回false。 includes方法区分大小写。

dataTransfer.getData

DataTransfer.setData方法用来设置拖放操作的drag data到指定的数据和类型。 如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得types列表中的最后一个项目将是新类型。 如果给定类型的数据已经存在，现有数据将被替换为相同的位置。也就是说，替换相同类型的数据时types列表的顺序不会更改。

alert

MDN

window.alert()令浏览器显示一个带有可选的信息的对话框，并等待用户离开该对话框。 在某些情况下(例如，当用户切换标签时)浏览器可能不会实际显示一个对话框，或者不等待用户离开对话框。

w3school

如果要确保信息传递给用户，通常会使用警告框。 当警告框弹出时，用户将需要单击“确定”来继续。

实现概况

页面分为三个部分。第一部分是文件夹，在循环文件夹名称的元素上绑定ondrop和ondragover。ondrop函数会在鼠标放置时被触发，ondragover函数会在鼠标移动时被触发。第二部分就是放置视频流的容器元素，第一部分和第二部分形成了两个v-for的嵌套形式。第三部分是数据源，在循环出来的数据元素上绑定不同的id，绑定id是为了拖动时复制内容，同时还需要绑定ondragstart函数，ondragstart函数会在拖动时被触发，并且标签上还需要设置draggaable='true'属性。

完整代码

gitee(码云) - mj01分支 - vueCopyDragAndDrop 文件