angularjs建立彈出框實現拖動效果_AngularJS

本文執行個體介紹了angularjs建立彈出框實現拖動效果的相關代碼，項目中需要將angular-ui-bootstrap中用到的彈出框，使之可拖動，分享給大家供大家參考，具體內容如下

運行效果圖：

由於源檔案中沒有實現，需要自己實現指令，以下即為該指令，親測可以實現。

.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);        }        };  }]);

以上就是本文的全部內容，希望對大家的學習有所協助。