首页 > Web开发 > 详细

angularjs modal模态框----创建可拖动的指令

时间:2016-01-06 17:55:59      阅读:257      评论:0      收藏:0      [点我收藏+]
//最近项目中需要将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); } }; }]);

 如图:已不在屏幕中央,为拖动后的效果

技术分享

angularjs modal模态框----创建可拖动的指令

原文:http://www.cnblogs.com/bobo-show/p/5106204.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!