code: function draggableDirective() {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var domElement = element[0];
        var effectAllowed = attrs.effectAllowed;
        var draggableData = attrs.draggableData;
        var draggableType = attrs.draggableType;
        var draggable = attrs.draggable === 'false' ? false : true;
  
        // Make element draggable or not.
        domElement.draggable = draggable;
  
        if (! draggable) return ;
  
        domElement.addEventListener('dragstart', function (e) {
          // Restrict drag effect.
          e.dataTransfer.effectAllowed = effectAllowed || e.dataTransfer.effectAllowed;
  
          // Eval and serialize data.
          var data = scope.$eval(draggableData);
          var jsonData =  angular.toJson(data);
  
          // Set drag data and drag type.
          e.dataTransfer.setData('json/' + draggableType, jsonData);
  
          e.stopPropagation();
        });
      }
    };
  }
docs: Draggable directive.
  
  @example
  <div draggable="true" effect-allowed="link" draggable-type="image" draggable-data="{foo: 'bar'}"></div>
  
  - "draggable" Make the element draggable. Accepts a boolean.
  - "effect-allowed" Allowed effects for the dragged element,
  see https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#effectAllowed.28.29.
  Accepts a string.
  - "draggable-type" Type of data object attached to the dragged element, this type
  is prefixed by "json/". Accepts a string.
  - "draggable-data" Data attached to the dragged element, data are serialized in JSON.
  Accepts an Angular expression.