How to register my own event listeners in AngularJS?

Adding an event listener would be done in the linking method of a directive. Below I've written some examples of basic directives. HOWEVER, if you wanted to use jquery-ui's .draggable() and .droppable(), what you can do is know that the elem param in the link function of each directive below is actually a jQuery object. So you could call elem.draggable() and do what you're going to do there.

Here's an example of binding dragstart in Angular with a directive:

app.directive('draggableThing', function(){    return {      restrict: 'A', //attribute only      link: function(scope, elem, attr, ctrl) {         elem.bind('dragstart', function(e) {            //do something here.         });      }   };});

Here's how you'd use that.

<div draggable-thing>This is draggable.</div>

An example of binding drop to a div or something with Angular.

app.directive('droppableArea', function() {   return {       restrict: 'A',       link: function(scope, elem, attr, ctrl) {            elem.bind('drop', function(e) {                /* do something here */            });       }   };});

Here's how you'd use that.

<div droppable-area>Drop stuff here</div>

I hope that helps.

Hiding event handling and dom manipulation in a directive is pretty much the the angularjs way. Calling scope.$apply when an event fires tells angular to update the view.

You might consider using jquery-ui like in this sample (see angular wiki of examplesI work with the angular-ui group and there is a simple event wrapper you might find useful.

Nice solution by Ben but keep in mind you will need to access originalEvent and original element. According to Mozilla documentation two conditions must meet https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

1. draggable is true
2. Listener for dragstart

So directive might look something like this

app.directive('draggableThing', function () {    return function(scope, element, attr) {        var pureJsElement = element[0];        pureJsElement.draggable = true;        element.bind('dragstart', function(event) {            event.originalEvent.dataTransfer.setData('text/plain',                               'This text may be dragged');        //do something here.        });    }});

A good step by step example is available here http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html