Angularjs create a pop-up box to achieve drag effect _ AngularJS

This article mainly introduces the information about how angularjs creates a pop-up box to achieve the drag effect, and the angularjsmodal modal box to create commands that can be dragged, if you are interested, refer to the example in this article to introduce the code for creating the angularjs pop-up box to implement the drag effect. In the project, you need to use the pop-up box in angular-ui-bootstrap, it can be dragged and shared with you for your reference. The specific content is as follows:

Run:

Because the source file is not implemented, You need to implement the command by yourself. The following is the command, which can be achieved through the test.

.directive('draggable', ['$document', function($document) {        return function(scope, element, attr) {        var startX = 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.preventDefault();          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 all the content of this article, hoping to help you learn.