drag-directive.coffee

module = angular.module 'app.directives', []

module.directive 'dDraggable', ->
  return {
    scope:
      index:'@?'
    link: (scope, element, attrs) ->
      element = $(element)
      element.attr('draggable', 'true')
      data = element.data()
      element.bind('dragstart', (event) ->
        event.dataTransfer = event.originalEvent.dataTransfer
        event.dataTransfer.setData(key.toString(), data[key].toString()) for key in Object.keys(data)
        event.dataTransfer.setData('index', scope.index.toString()) if scope.index?
      )
  }

module.directive 'dDropTarget', ->
  return{
    scope:
      onDrop: '=dDropTarget'
      receive: '='
    link: (scope, element, attrs) ->
      element = $(element)
      element.bind('dragover', (e) -> e.preventDefault() if e.preventDefault)
      element.bind('dragenter', (e) -> $(e.target).addClass('drag-hover'))
      element.bind('dragleave', (e) -> $(e.target).removeClass('drag-hover'))
      element.bind('drop', (event) ->
        event.preventDefault() if event.preventDefault?
        event.stopPropagation() if event.stopPropagation?
        data = {}
        event.dataTransfer = event.originalEvent.dataTransfer
        if typeof scope.receive == 'string'
          data[scope.receive] = event.dataTransfer.getData(scope.receive)
        else
          data[key] = event.dataTransfer.getData(key) for key in scope.receive
        scope.onDrop(data)
      )
  }

drag-directive.js

(function() {
  var module;

  module = angular.module('app.directives', []);

  module.directive('dDraggable', function() {
    return {
      scope: {
        index: '@?'
      },
      link: function(scope, element, attrs) {
        var data;
        element = $(element);
        element.attr('draggable', 'true');
        data = element.data();
        return element.bind('dragstart', function(event) {
          var i, key, len, ref;
          event.dataTransfer = event.originalEvent.dataTransfer;
          ref = Object.keys(data);
          for (i = 0, len = ref.length; i < len; i++) {
            key = ref[i];
            event.dataTransfer.setData(key.toString(), data[key].toString());
          }
          if (scope.index != null) {
            return event.dataTransfer.setData('index', scope.index.toString());
          }
        });
      }
    };
  });

  module.directive('dDropTarget', function() {
    return {
      scope: {
        onDrop: '=dDropTarget',
        receive: '='
      },
      link: function(scope, element, attrs) {
        element = $(element);
        element.bind('dragover', function(e) {
          if (e.preventDefault) {
            return e.preventDefault();
          }
        });
        element.bind('dragenter', function(e) {
          return $(e.target).addClass('drag-hover');
        });
        element.bind('dragleave', function(e) {
          return $(e.target).removeClass('drag-hover');
        });
        return element.bind('drop', function(event) {
          var data, i, key, len, ref;
          if (event.preventDefault != null) {
            event.preventDefault();
          }
          if (event.stopPropagation != null) {
            event.stopPropagation();
          }
          data = {};
          event.dataTransfer = event.originalEvent.dataTransfer;
          if (typeof scope.receive === 'string') {
            data[scope.receive] = event.dataTransfer.getData(scope.receive);
          } else {
            ref = scope.receive;
            for (i = 0, len = ref.length; i < len; i++) {
              key = ref[i];
              data[key] = event.dataTransfer.getData(key);
            }
          }
          return scope.onDrop(data);
        });
      }
    };
  });

}).call(this);