JSPM

  • Created
  • Published
  • Downloads 37435
  • Score
    100M100P100Q173505F
  • License MIT

Unfuck the HTML5 drag & drop API

Package Exports

  • drag-drop

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (drag-drop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

drag-drop

Build Status NPM Version NPM Gittip

browser support

Unfuck the HTML5 drag & drop API

Also works in the browser with browserify!

install

npm install drag-drop

usage

var dragDrop = require('drag-drop')
var dropTarget = document.querySelector('#dropTarget')

dragDrop(dropTarget, function (files) {
  console.log('Here are the dropped files', files)
})

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!

a more complete example

var dragDrop = require('drag-drop')
var dropTarget = document.querySelector('#dropTarget')

dragDrop(dropTarget, function (files) {
  console.log('Here are the dropped files', files)

  // `files` is an Array!
  files.forEach(function (file) {

    // 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)
  })
})

license

MIT. Copyright (c) Feross Aboukhadijeh.