drag-drop

HTML5 drag & drop for humans

drag-drop

In case you didn't know, the HTML5 drag and drop API is a total disaster! This is an attempt to make the API usable by mere mortals.

This module works in the browser with browserify and it's used by WebTorrent!

Note: If you're not using browserify, then use the included standalone file dragdrop.bundle.js. This exports a DragDrop function on window.

  • simple API
  • adds a drag class to the drop target on hover, for easy styling!
  • optionally, get the file(s) as a Buffer (see buffer)
npm install drag-drop
var dragDrop = require('drag-drop')
 
dragDrop('#dropTarget', function (filespos) {
  console.log('Here are the dropped files', files)
  console.log('Dropped at coordinates', pos.x, pos.y)
})

Another handy thing this does is add a drag class to the drop target when the user is dragging a file over the drop target. Useful for styling the drop target to make it obvious that this is a drop target!

var dragDrop = require('drag-drop')
 
// You can pass in a DOM node or a selector string! 
dragDrop('#dropTarget', function (files) {
  console.log('Here are the dropped files', files)
 
  // `files` is an Array! 
  files.forEach(function (file) {
    console.log(file.name)
    console.log(file.size)
    console.log(file.type)
    console.log(file.lastModifiedData)
    console.log(file.fullPath)
 
    // convert the file to a Buffer that we can use! 
    var reader = new FileReader()
    reader.addEventListener('load', function (e) {
      // e.target.result is an ArrayBuffer 
      var arr = new Uint8Array(e.target.result)
      var buffer = new Buffer(arr)
 
      // do something with the buffer! 
    })
    reader.addEventListener('error', function (err) {
      console.error('FileReader error' + err)
    })
    reader.readAsArrayBuffer(file)
  })
})

If you prefer to access file data as Buffers, then just require drag-drop like this:

var dragDrop = require('drag-drop/buffer')
 
dragDrop('#dropTarget', function (files) {
  files.forEach(function (file) {
    // file is actually a buffer! 
    console.log(file.readUInt32LE(0))
    console.log(file.toJSON())
    console.log(file.toString('hex')) // etc... 
 
    // but it still has all the normal file properties! 
    console.log(file.name)
    console.log(file.size)
    console.log(file.type)
    console.log(file.lastModifiedDate)
  })
}

To stop listening for drag & drop events and remove the event listeners, just use the remove function returned by the dragDrop function.

var dragDrop = require('drag-drop')
 
var remove = dragDrop('#dropTarget', function (filespos) {
  console.log('Here are the dropped files', files)
  console.log('Dropped at coordinates', pos.x, pos.y)
})
 
// ... at some point in the future, stop listening for drag & drop events 
remove()

MIT. Copyright (c) Feross Aboukhadijeh.