Skip to content

betterup/ember-draggable

Repository files navigation

ember-draggable

HTML5 drag/drop support for ember components

Features

  • HTML5 drag/drop specification
  • cross browser support (Chrome, Firefox, Safari, IE 10+)
  • shim for moz-drag-over CSS psuedoclass

Installation

$ ember install ember-draggable

Usage

Draggable Components

import Ember from 'ember';
import Draggable from 'ember-draggable/mixins/draggable';
import Droppable from 'ember-draggable/mixins/droppable';

// example draggable component
export default Ember.Component.extend(Draggable, {
  model: null,
  draggableData: Ember.computed.alias('model.id')
});

// example droppable component
export default Ember.Component.extend(Droppable, {
  actions: {
    drop(modelId) {
      console.log('dropped model id: ', modelId);
    }
  }
});

HTML5 Drop Target

import Ember from 'ember';
import Droppable from 'ember-draggable/mixins/droppable';

export default Ember.Component.extend(Droppable, {
  acceptedDropTypes: [
    'text/uri-list'
  ],
  actions: {
    drop(url) {
      console.log('dropped link: ', url);
    }
  }
});

Development

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published