salix/front/core/directives/droppable.js

import ngModule from '../module';
import './droppable.scss';

export function directive($parse) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            const element = $element[0];
            const onDropEvent = $parse($attrs.onDrop);
            const isDroppable = $attrs.vnDroppable === 'true';

            if (!isDroppable) return;

            /**
             * Captures current dragging element
             */
            element.addEventListener('dragstart', () => {
                this.dragged = element;
            });

            /**
             * Enter droppable area event
             */
            element.addEventListener('dragenter', event => {
                element.classList.add('active');

                event.stopImmediatePropagation();
                event.preventDefault();
            }, false);


            /**
             * Exit droppable area event
             */
            element.addEventListener('dragleave', event => {
                element.classList.remove('active');

                event.stopImmediatePropagation();
                event.preventDefault();
            });

            /**
             * Prevent dragover for allowing
             * dispatch drop event
             */
            element.addEventListener('dragover', event => {
                event.stopPropagation();
                event.preventDefault();
            });

            /**
             * Fires when a drop events
             */
            element.addEventListener('drop', event => {
                element.classList.remove('active');

                onDropEvent($scope, {event});

                event.stopPropagation();
                event.preventDefault();
            });
        }
    };
}

directive.$inject = ['$parse'];

ngModule.directive('vnDroppable', directive);