友迪情感
您的当前位置:首页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);
 }
 };
 }]);
显示全文