Ember.js Cookbook

Working with HTML5 drag and drop

Drag and drop is a part of the HTML5 standard. It allows the user to grab objects in the DOM and drop them at different locations. Any element can be draggable if the browser supports it. Most modern browsers do.

In this recipe, we'll see an example of dragging an IMG file to a drop zone on the screen.

How to do it...

1. In a new application, generate these files:

   $ ember g component drag-drop-zone
   $ ember g component drag-drop
   

   The drag-drop-zone component will represent the area where each item will be dropped. The drag-drop component will be the item to be dropped.

2. Edit the drag-drop-zone.js file:

   // app/components/drag-drop-zone.js import Ember from 'ember'; export default Ember.Component.extend({ classNames: ['draggable-dropzone'], ...