drag and drop - How to register my own event listeners in AngularJS?

Question

How do I register my own event listeners in an AngularJS app?

To be specific, I am trying to register Drag and Drop (DND) listeners so that when something is dragged and dropped in a new location of my view, AngularJS recalculates the business logic and updates the model and then the view.

question from:https://stackoverflow.com/questions/12874797/how-to-register-my-own-event-listeners-in-angularjs

Answer 1

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.