angular-draganddrop.js
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();
      });
    }
  };
}
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();
      });
    }
  };
}
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 ( ) ; } ) ; } } ; }
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.
Draggable directive .