ANGULARJS Create a pop-up box to implement the drag effect _angularjs

This article introduces the Angularjs create pop-up box to achieve the drag effect of the relevant code, the project needs to be used in the Angular-ui-bootstrap pop-up box, so that it can be dragged, shared for everyone to reference, the specific content as follows

Run Effect chart:

Because the source file is not implemented, you need to implement the instructions, the following is the directive, the test can be achieved.

. directive (' draggable ', [' $document ', function ($document) {return function (scope, element, attr) {var s
        Tartx = 0, Starty = 0, x = 0, y = 0; 
        Element= angular.element (Document.getelementsbyclassname ("Modal-dialog"));

        Element.css ({position: ' relative ', cursor: ' move '}); Element.on (' MouseDown ', function (event) {//Prevent default dragging of selected content Event.preven
          Tdefault ();
          StartX = Event.pagex-x;
          Starty = event.pagey-y;
          $document. On (' MouseMove ', MouseMove);
        $document. On (' MouseUp ', MouseUp);

        });
          function MouseMove (event) {y = Event.pagey-starty;
          x = Event.pagex-startx;
        Element.css ({top:y + ' px ', left:x + ' px '});
          function MouseUp () {$document. Off (' MouseMove ', MouseMove);
        $document. Off (' MouseUp ', MouseUp);
      }  };
 }]);

The above is the entire content of this article, I hope to help you learn.