angularjs创建弹出框实现拖动效果
更新时间：2020年08月25日 08:52:36 作者：garsonguo
这篇文章主要为大家详细介绍了angularjs创建弹出框实现拖动效果的相关资料，angularjs modal模态框创建可拖动的指令，感兴趣的小伙伴们可以参考一下
本文实例介绍了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);
}
};
}]);
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
今天小编就为大家分享一篇angular中子控制器向父控制器传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
最近在做AngularJS 项目，这是写的一个60秒倒计时功能，下面小编给大家介绍AngularJS 验证码60秒倒计时功能的实现，需要的朋友参考下吧2017-06-06
angularJs select绑定的model取不到值的解决方法
今天小编就为大家分享一篇angularJs select绑定的model取不到值的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要给大家介绍了关于Angular2使用jQuery的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。2017-05-05
这篇文章主要介绍了Web开发使用Angular实现用户密码强度判别的方法,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了AngularJS创建自定义指令的方法,详细的分析了自定义指令的原理、实现步骤、实现方法与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章介绍的是写一个通过指令嵌套实现tabs功能的指令模块，这也是我在一个项目中应用到的，现在分享给大家，有需要的可以参考借鉴。2016-08-08
AngularJS使用自定义指令替代ng-repeat的方法
这篇文章主要介绍了另一种即具有与ng-repeat一样处理大量数据的绑定的功能，又具有超高性能的自定义方法，有需要的小伙伴们可以参考借鉴，下面来一起看看吧。2016-09-09
本篇文章主要介绍了AngularJS之$window窗口对象，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了详解angularJs中自定义directive的数据交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
最新评论