博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs modal模态框----创建可拖动的指令
阅读量:7078 次
发布时间:2019-06-28

本文共 1389 字,大约阅读时间需要 4 分钟。

//最近项目中需要将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);                }                };    }]);

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

转载于:https://www.cnblogs.com/bobo-show/p/5106204.html

你可能感兴趣的文章
学习C++ -> 引用( References )
查看>>
分享:在Qt工程中加Boost
查看>>
远程桌面相关
查看>>
减少Linux 电耗 转自IBM
查看>>
新的一年又开始了,加油2013!
查看>>
设计模式:桥接模式(Bridge Pattern)
查看>>
Windows Phone_学习第三天
查看>>
什么是窄门?
查看>>
关于z-index的那些事儿
查看>>
通过Raspberry Pi(树莓派)的GPIO接口控制发光二极管
查看>>
使用VirtualBox SDK之初步编译
查看>>
Mermaid from《Pirates of the Caribbean: On Stranger Tides》
查看>>
基础才是重中之重~网站bin目录下的程序集自动加载
查看>>
不懂设计模式
查看>>
《CLR Via C# 第3版》笔记之(二十四) - 委托
查看>>
深入解析.NET架构C#
查看>>
Intersect, Except, Union, All and Any(3)
查看>>
JAVA数据结构之单链表操作简单实现
查看>>
hdu 1208+hdu 1619(记忆化搜索)
查看>>
监听控件禁用键盘上的指定键 兼容iE、Chrome、火狐
查看>>