Simple Angular/jQuery UI drag & drop directive

controller.js

angular
  .module(
    'app.controllers',
    []
  )
  .controller(
    'DashboardCtrl',
    [
      '$scope',
      function($scope) {
        $scope.onActivate = function(source, target) {
          // You can add more checks to visualize if this area can get used for dropping
          angular.element(target).addClass('droppable-area');
        }

        $scope.onDeactivate = function(source, target) {
          // This reverts the classes add by the onActivate event handling function
          angular.element(target).removeClass('droppable-area');
        }

        // You don't have to add all options that are available, you can use the options you need and want
        $scope.onDrop = function(source, target) {
          var node = angular.element(source);
          var nodeId = node.data('id');

          var group = angular.element(target);
          var groupId = group.data('id');

          var oldParent = node.data('parent');

          // Do some cool stuff with the dropped element!
        }

directive.js

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

  .directive(
    'draggable', 
    [
      '$rootScope',
      function($rootScope) {
        var parseResponse = function(event, ui) {
          return {
            source: ui.helper.context,
            target: event.target,
            offset: ui.offset,
            position: ui.position,
            type: event.type
          }
        }

        return {
          restrict: 'A',
          scope: {
            onDrag: '&',
            onStart: '&',
            onStop: '&'
          },
          link: function(scope, el, attrs, controller) {
            angular.element(el).addClass('draggable');

            $(angular.element(el)).draggable({
              opacity: 1,
              zIndex: 999,
              helper: "clone",
              drag: function(event, ui) {
                return scope.onDrag(parseResponse(event, ui));
              },
              start: function(event, ui) {
                return scope.onStart(parseResponse(event, ui));
              },
              stop: function(event, ui) {
                return scope.onStop(parseResponse(event, ui));
              }
            });
          }
        }
      }
    ]
  )

  .directive(
    'droppable', 
    [
      '$rootScope',
      function($rootScope) {
        var parseResponse = function(event, ui) {
          return {
            source: ui.helper.context,
            target: event.target,
            offset: ui.offset,
            position: ui.position,
            type: event.type
          }
        }

        return {
          restrict: 'A',
          scope: {
            onActivate: '&',
            onDeactivate: '&',
            onOut: '&',
            onOver: '&',
            onDrop: '&'
          },
          link: function(scope, el, attrs, controller) {
            $(angular.element(el)).droppable({
              hoverClass: 'targeted',
              activate: function(event, ui) {
                return scope.onActivate(parseResponse(event, ui));
              },
              deactivate: function(event, ui) {
                return scope.onDeactivate(parseResponse(event, ui));
              },
              out: function(event, ui) {
                return scope.onOut(parseResponse(event, ui));
              },
              over: function(event, ui) {
                return scope.onOver(parseResponse(event, ui));
              },
              drop: function(event, ui) {
                return scope.onDrop(parseResponse(event, ui));
              }
            });
          }
        }
      }
    ]
  );

usage.haml

.row
  .col-xs-3{ data: { ng_repeat: "(group_name, group) in groups" } }
    .panel.panel-default{ data: { droppable: "true", id: "{{group.handle}}", on_drop: "onDrop(source, target)", on_activate: "onActivate(source, target)", on_deactivate: "onDeactivate(source, target)" } }
      .panel-heading
        %h2
          {{group.title}}

      %ul.list-group
        %li.list-group-item{ data: { ng_repeat: "(node_name, node) in group.nodes", draggable: "true", id: "{{node.handle}}", parent: "{{group.handle}}" } }
          {{node.alias}}

        %li.list-group-item.empty{ data: { ng_hide: "group.nodes | nonEmpty" } }
          Drop nodes to move them here