44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
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);
|