O'Reilly logo

Ember.js Cookbook by Erik Hanchett

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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'], ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required