drag-file-listener

为元素绑定拖拽事件,并获取拖拽文件

Usage no npm install needed!

<script type="module">
  import dragFileListener from 'https://cdn.skypack.dev/drag-file-listener';
</script>

README

The listener element drags and drops into the file and returns the file and directory tree

中文文档 | Englist doc

DEMO

codesandbox

Installation

yarn add drag-file-listener

Using

import Drag from 'drag-file-listener'

const drager = new DragLitener({
  selector: document.querySelector('.drag'),
  drop: ({ file, filesTree }) => {}
})

option

props must type default description
selector true element - listen element
drop true function - drop event, get the file and directory tree
function({ files, filesTree }){}
  • filesTree
[{
  "name": "文件夹名称",
  "fullPath": "路径",
  "chileren": [],  //子文件夹
  "files":  [],  //当前文件夹下文件
}]

Instance Methods

  • remove listener
drager.removeListener()
  • add listener
drager.addListener()