How to drag&drop elements onto a calendar with angular directives only

Question

I am trying to implement a drag&drop calendar with angular directives. The calendar uses the ui-calendar (https://github.com/angular-ui/ui-calendar), a complete AngularJ

Answer 1

Haven't used angular-dragdrop, but the documentation says that the config object should contain a onDrop property. Try replacing jqyoui-droppable="{multiple:true}" with jqyoui-droppable="{multiple:true, onDrop: 'drop'}". angular-dragdrop seem to expect onDrop to be a string with the name of a function on the scope.

Answer 2

Another way to accomplish this is use JqueryUI draggable. Create directive and pass the attributes via "elem". You can include title as an attribute as well.

.directive('dragMe', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.data('event', {
          title: $.trim($(elem).text()), // use the element's text as the event title
          stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
      elem.draggable({
          zIndex: 999,
          revert: true,      // will cause the event to go back to its
          revertDuration: 0  //  original position after the drag
        });
    }
  };
})