mrliz/angular-mousedrag

Angular Mouse Drag Directive

Simple AngularJS directive for handling mouse dragging events. If you are not interested in complicated drag & drop directives and looking for a simple lightweight directive for handling mousedrag events, that's the directive for you!

Requirements

AngularJS - tested on 1.2.19

Installation

bower install --save ng-mousedrag

Usage

HTML:

<script src="ng-mousedrag.min.js"></script>

<div ng-controller="MyCtrl">
  <div id="draggable" ng-mousedrag="onMouseDrag($event);" style="position:absolute"></div>
</div>

JS:

angular.module('myApp', ['ngMouseDrag']);
var MyCtrl = [ '$scope', function($scope) {

  $scope.onMouseDrag = function ($event) {
    var draggableObject = document.getElementById('draggable');
    draggableObject.style.top = $event.pageY + 'px';
    draggableObject.style.left = $event.pageX + 'px';
  }
  
}];

Checkout example.html for a live example.