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

本文共 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

你可能感兴趣的文章
单点登录加验证码例子
查看>>
[T-SQL]从变量与数据类型说起
查看>>
稀疏自动编码之反向传播算法(BP)
查看>>
二叉搜索树转换成双向链表
查看>>
WebLogic和Tomcat的区别
查看>>
java类中 获取服务器的IP 端口
查看>>
调用约定__stdcall / __cdecl
查看>>
occActiveX - ActiveX with OpenCASCADE
查看>>
redmine
查看>>
css 序
查看>>
DirectshowLib摄像头拍照的”未找到可用于建立连接的介质筛选器组合“ 解决办法...
查看>>
wcf-1
查看>>
三种简单排序
查看>>
[Java]读取文件方法大全
查看>>
【NopCommerce源码架构学习-二】单例模式实现代码分析
查看>>
动态规划大合集II
查看>>
MySQL忘记密码后重置密码(Mac )
查看>>
web.xml中的url-pattern映射规则
查看>>
图像的下采样Subsampling 与 上采样 Upsampling
查看>>
SQL 数据类型
查看>>