salix/front/core/directives/draggable.js

import ngModule from '../module';

/**
 * Enables a draggable element and his drag events
 *
 * @return {Object} The directive
 */
export function directive() {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            const element = $element[0];
            const isDraggable = $attrs.vnDraggable === 'true';

            if (!isDraggable) return;

            // Set draggable style properties
            element.style.cursor = 'move';


            // Enable as draggable element
            element.setAttribute('draggable', true);

            /**
             * Fires when a drag event starts
             */
            element.addEventListener('dragstart', event => {
                element.style.opacity = 0.5;
                event.stopPropagation();
            });

            /**
             * Fires when a drag event ends
             */
            element.addEventListener('dragend', event => {
                element.style.opacity = 1;
                event.stopPropagation();
            });
        }
    };
}

ngModule.directive('vnDraggable', directive);