salix/front/core/directives/droppable.js

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
    };
});