Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/instructure/ic-droppable
Ember Component Mixin that wraps native drop events. No longer maintained.
https://github.com/instructure/ic-droppable
Last synced: 7 days ago
JSON representation
Ember Component Mixin that wraps native drop events. No longer maintained.
- Host: GitHub
- URL: https://github.com/instructure/ic-droppable
- Owner: instructure
- License: mit
- Created: 2014-04-03T23:40:50.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-27T00:04:12.000Z (over 8 years ago)
- Last Synced: 2024-10-09T14:37:42.164Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 1.02 MB
- Stars: 25
- Watchers: 11
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
ic-droppable (no longer maintained)
============
Ember component mixin that wraps native drop events.
Demo
----
https://instructure.github.io/ic-droppable
Installation
------------
`bower install ic-droppable`
`npm install ic-droppable`
... or download one of the distributions in `dist` and include however
you want.
Module Support
--------------
- AMD
`define(['ic-droppable'], function(Droppable) {});`
- CJS
`var Droppable = require('ic-styled')`
- Globals
`var Droppable = ic.Droppable.default`
Usage
-----
```js
var Droppable = ic.Droppable.default;
// first mix Droppable into a component
App.XDropComponent = Ember.Component.extend(Droppable, {
tagName: 'x-drop',
// Next define a validateDragEvent method, native draggables have
// data types that you can read while the drag is moving over your
// component.
validateDragEvent: function(event) {
return event.dataTransfer.types.contains('text/x-drag');
},
// Finally, define an acceptDrop method to do whatever you need to
// do when the user drops on your component.
acceptDrop: function(event) {
var data = event.dataTransfer.getData('text/x-drag');
alert(data);
}
});
// And just for demonstration, here's a simple draggable element.
App.XDragComponent = Ember.Component.extend({
attributeBindings: ['draggable']
draggable: true,
setEventData: function(event) {
event.dataTransfer.setData('text/x-drag', this.get('elementId'));
}.on('dragStart')
});
```
```css
/*
when a valid drag event is over your component
*/
x-drop.accepts-drag {
background-color: green;
}
/*
when the component is dragging over itself, and it is a valid drop
target (the case with sortables sometimes)
*/
x-drop.self-drop {
background-color: red;
}
```
And a simple template:
```handlebars
{{x-drag}}Drag me{{x-drag}}
{{x-drop}}Drop here{{/x-drop}}
```
Contributing
------------
```sh
bower install
npm install
npm test
```
License and Copyright
---------------------
MIT Style license
(c) 2014 Instructure, Inc.