ember-drop-zone

Ember drop zone

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ember-drop-zone
411.0.05 years ago6 years agoMinified + gzip package size for ember-drop-zone in KB

Readme

Ember-drop-zone
Ember-drop-zone is an Ember-cli addon that provides a drop-zone component.

Install

  • ember install ember-drop-zone

Use

DropZoneComponent

Create a drop-zone using the {{drop-zone}} component.
{{#drop-zone action=(action "doSomething")}}
  drop items here...
{{/drop-zone}}

Then handle the action in your controller or component.
import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    doSomething(droppedItem) {
      // do something with `droppedItem`
    }
  }
});

By default the DropZoneComponent component will extract string data from the event.dataTransfer object.

Get Files

The DropZoneComponent be setup to enable dropping files onto it. First, you need to import the getFiles method into your controller or component.
import getFiles from 'ember-drop-zone/utils/get-files';

export default Ember.Component.extend({
  getFiles
});

Then assign the getFiles method to the getData method of the DropZoneComponent. This will change the behavior of the DropZoneComponent so that it will extract files from the event.dataTransfer object instead of text.
{{#drop-zone action=(action "doSomething") getData=getFiles}}
  Drop files here...
{{/drop-zone}}

DroppableMixin

You can use the DroppableMixin to create your own drop-zone.
// my-drop-zone.js
import Ember from 'ember';
import DroppableMixin from 'ember-drop-zone/mixins/droppable';

export default Ember.Component.extend(DroppableMixin, {

  drop(event) {
    // do something...
  }

});

DraggableMixin

You can use the DraggableMixin to create a draggable component. Add the DraggableMixin to a component that you want to make draggable.
import Ember from 'ember';
import DraggableMixin from 'ember-drop-zone/mixins/draggable';

export default Ember.Component.extend(DraggableMixin, {
  // ...
});

By default the DraggableMixin will look for a model on the component and send the id and type of that model encoded as JSON to the event.dataTransfer Object.

Installation for development

  • git clone <repository-url> this repository
  • cd ember-drop-zone
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.