Naboo's Podracing Misadventure

    ember-drop-zone

    1.0.0 • Public • Published

    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/.

    Install

    npm i ember-drop-zone

    DownloadsWeekly Downloads

    249

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    234 kB

    Total Files

    15

    Last publish

    Collaborators

    • lozjackson