This article mainly introduces the information about how angularjs creates a pop-up box to achieve the drag effect. The angularjsmodal modal box creates a drag-and-drop command. If you are interested, refer to it. This article introduces the Code related to creating a pop-up box for angularjs to implement the drag effect. In the project, you need to use the pop-up box in angular-ui-bootstrap to make it scalable, for your reference, the specific content is as follows.
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); } }; }]);