码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-06 17:59:07      阅读:148      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!