Simple Drag and Drop

simple-dd.js

var Module = angular.module('simple-drag-drop', []);

Module.directive('draggable', function(draggingStudent) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.draggable({
        revert: "invalid",
        helper:"clone",
        start: function() {
          // <foo draggable on-drag='thingsThatsdragging=student'>
          scope.$eval(attrs.onDragstart);
          draggingStudent.student = scope.student;
          draggingStudent.cohort = scope.cohort;
          $(this).addClass("dragging")
        },
        stop: function() {
          scope.$eval(attrs.onStop);
          // $(this).removeClass("dragging")
        },
        drag: function() {
          scope.$eval(attrs.onDrag);
          $(this).addClass("dragging")
        }
      });
    }
  }
});

Module.directive('droppable', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.droppable({
        hoverClass: "draghover",
        drop: function() {
          scope.$eval(attrs.onDrop);
          $(".dragging").removeClass("dragging");
        }

      })
    }
  }
});