Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

drag-drop

HTML5 drag & drop for humans

Subscribe to updates I use drag-drop


Statistics on drag-drop

Number of watchers on Github 325
Number of open issues 3
Average time to close an issue 4 days
Main language JavaScript
Average time to merge a PR 3 days
Open pull requests 4+
Closed pull requests 1+
Last commit over 1 year ago
Repo Created over 5 years ago
Repo Last Updated over 1 year ago
Size 103 KB
Organization / Authorfeross
Contributors6
Page Updated
Do you use drag-drop? Leave a review!
View open issues (3)
View drag-drop activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating drag-drop for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

drag-drop travis npm downloads javascript style guide

HTML5 drag & drop for humans

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.

Note: If you do not use browserify, use the included standalone file dragdrop.min.js. This exports a DragDrop function on window.

live demo

See https://instant.io.

features

  • 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)

install

npm install drag-drop

usage

var dragDrop = require('drag-drop')

dragDrop('#dropTarget', function (files, pos) {
  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!

complete example

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) // not real full path due to browser security restrictions
    console.log(file.path) // in Electron, this contains the actual full path

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

get files as buffers

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

remove listeners

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 (files, pos) {
  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()

detect dragenter, dragover and dragleave events

Instead of passing just an ondrop function as the second argument, instead pass an object with all the events you want to listen for:

var dragDrop = require('drag-drop')

dragDrop('#dropTarget', {
  onDrop: function (files, pos) {
    console.log('Here are the dropped files', files)
    console.log('Dropped at coordinates', pos.x, pos.y)
  },
  onDragEnter: function () {},
  onDragOver: function () {},
  onDragLeave: function () {}
})

detect drag-and-dropped text

If the user highlights text and drags it, we capture that as a separate event. Listen for it like this:

var dragDrop = require('drag-drop')

dragDrop('#dropTarget', {
  onDropText: function (text, pos) {
    console.log('Here is the dropped text', text)
    console.log('Dropped at coordinates', pos.x, pos.y)
  }
})

a note about file:// urls

Don't run your app from file://. For security reasons, browsers do not allow you to run your app from file://. In fact, many of the powerful storage APIs throw errors if you run the app locally from file://.

Instead, start a local server and visit your site at http://localhost:port.

license

MIT. Copyright (c) Feross Aboukhadijeh.

drag-drop open issues Ask a question     (View All Issues)
  • over 2 years How about onDragEnter handler?
drag-drop open pull requests (View All Pulls)
  • Use RawGit to serve dragdrop.min.js
  • add `onDropText` event to support text dropping
  • added drop text support
  • Update dependencies to enable Greenkeeper 🌴
drag-drop questions on Stackoverflow (View All Questions)
  • Remove droppable element with Angularjs Drag&Drop
  • jQuery Drag & Drop- how to know which element OUT from box
  • Drag, Drop and move Image within web application ASP.net
  • Drag/drop controls onto child Canvas without parent Canvas being notified
  • Drag & Drop Works - Autoscroll Doesn't
  • Drag & Drop Espresso
  • How target a movieClip in animate cc in this drag drop code
  • RecyclerView drag & drop via itemTouchHelper bahaving strange when dragging fast
  • Drag Drop Feature and Arrow Map
  • JavaFX Tab positioning on mouse drag/drop
  • Jquery Drag Drop Sort from List to Table Cell not working
  • c# Drag & Drop issue
  • YUI drag&drop proxy drag
  • UWP GridView drag drop not working
  • Angular UI Tree - Allow only drag & drop into second level (children nodes)
  • Visual Studio does not let me drag drop items into it?
  • Can you dynamically change the dragged Element in HTML5 Drag Drop API?
  • drag & drop preview selected
  • WYSIWYG Drag & Drop Html forms designer in .Net WPF vs Webforms/Html/JS
  • Drag & drop files upload multiple with preview before upload - php, javascript
  • Jquery Drag Drop not working correctly in a Dynamics CRM Web Resource
  • ListView drag&drop re-order for ListView in "details" view code usage
  • AngularJS - Combining drag drop with flow chart with source
  • Drag & Drop Delphi XE5
  • sql server express management studio drag drop
  • Does HTML5 allow drag-drop upload of folders or a folder tree?
  • ReactJS - Drag&Drop nodes/component without losing props
  • How to limited drag/drop (jquery sortable)?
  • Drag & Drop Multiple Elements of TreeView AlloyUI
  • How to limit drag & drop?
drag-drop list of languages used
Other projects in JavaScript