- 1 year ago 147
AngularJS Question

Drag and Drop using AngularJS (with or without jQuery), how?

what i want to do is exactly this , but that is in jQuery and i want to know if is there a way to do that in AngularJS, or if someone has alredy done it with the Angular way, and if not, how it suppouse that Angular allows you to customize directives to solve this kind of problems.

I know to use jQuery but i want to move on into AngularJS and its very confusing, so i'm sorry if my question isn't good enough, but all what i've found is this and that doesn't help at all. I'd really apreciate any advice you can say me about this.

Answer Source

Here is how I did it, it is a little more complicated, since I included the ability to add event handlers (start, drag, stop), and a container element. Here is a working fiddle for demonstration JSFiddle Without jQuery. Here is another fiddle with a version using jQuery and jQueryUI [JSFiddle w/ jQuery]. Hope it helps. JSFiddle With jQuery and jQueryUI.

You can use it like this


where in your controller you have

$scope.dragOptions = {
    start: function(e) {
    drag: function(e) {
    stop: function(e) {
    container: 'container-id'

Here is the directive.

.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    link: function(scope, elem, attr) {
      var startX, startY, x = 0, y = 0,
          start, stop, drag, container;

      var width  = elem[0].offsetWidth,
          height = elem[0].offsetHeight;

      // Obtain drag options
      if (scope.dragOptions) {
        start  = scope.dragOptions.start;
        drag   = scope.dragOptions.drag;
        stop   = scope.dragOptions.stop;
        var id = scope.dragOptions.container;
        container = document.getElementById(id).getBoundingClientRect();

      // Bind mousedown event
      elem.on('mousedown', function(e) {
        startX = e.clientX - elem[0].offsetLeft;
        startY = e.clientY - elem[0].offsetTop;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
        if (start) start(e);

      // Handle drag event
      function mousemove(e) {
        y = e.clientY - startY;
        x = e.clientX - startX;
        if (drag) drag(e);

      // Unbind drag events
      function mouseup(e) {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
        if (stop) stop(e);

      // Move element, within container if provided
      function setPosition() {
        if (container) {
          if (x < container.left) {
            x = container.left;
          } else if (x > container.right - width) {
            x = container.right - width;
          if (y < container.top) {
            y = container.top;
          } else if (y > container.bottom - height) {
            y = container.bottom - height;

          top: y + 'px',
          left:  x + 'px'