vue 拖拽产生连线_Vue 超简单教你如何实现一个文件拖拽

HTML 拖放(Drag and Drop)接口使应用程序能够在Firefox和其他浏览器中使用拖放功能。例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。对于网站、扩展以及 XUL 应用程序来说，你可以自定义能够成为可拖拽的元素类型、可拖拽元素产生的反馈类型，以及可放置的元素。

image.png

看到这个图片之后是不是有一种豁然开朗的感觉？我们要想实现一个简单的拖拽文件上传，只需要4个属性 drop、dragleave、dragenter、dragover;

话不多说，直接上代码；

html结构

{ {drapText}}

• { {item.name}}

export default {

name: 'drag',

data() {

return {

drapText: '将文件拖拽到此处进行上传',

fileData: []

}

}

}