44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
import ngModule from '../module';
|
|
import './droppable.scss';
|
|
|
|
class Controller {
|
|
constructor($element, $, $attrs) {
|
|
this.element = $element[0];
|
|
this.$ = $;
|
|
this.$attrs = $attrs;
|
|
|
|
this.element.addEventListener('dragover',
|
|
event => event.preventDefault()); // Prevents page reload
|
|
this.element.addEventListener('drop',
|
|
event => this.drop(event));
|
|
this.element.addEventListener('dragenter',
|
|
event => this.dragEnter(event));
|
|
this.element.addEventListener('dragleave',
|
|
event => this.dragLeave(event));
|
|
}
|
|
|
|
dragEnter(event) {
|
|
this.droppedElement = event.target;
|
|
this.element.classList.add('dropping');
|
|
}
|
|
|
|
dragLeave(event) {
|
|
if (this.droppedElement === event.target)
|
|
this.element.classList.remove('dropping');
|
|
}
|
|
|
|
drop(event) {
|
|
if (event.defaultPrevented) return;
|
|
event.preventDefault();
|
|
this.element.classList.remove('dropping');
|
|
this.$.$eval(this.$attrs.vnDroppable, {$event: event});
|
|
}
|
|
}
|
|
Controller.$inject = ['$element', '$scope', '$attrs'];
|
|
|
|
ngModule.directive('vnDroppable', () => {
|
|
return {
|
|
controller: Controller
|
|
};
|
|
});
|