angularjs创建弹出框实现拖动效果


Posted in Javascript onAugust 25, 2020

本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下

运行效果图:

angularjs创建弹出框实现拖动效果

由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现。

.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);
    }
    };
 }]);

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
JavaScript中定义类的方式详解
Jan 07 #Javascript
javascript类型系统 Window对象学习笔记
Jan 07 #Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 #Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 #Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 #Javascript
谈谈JavaScript类型系统之Math
Jan 06 #Javascript
莱鸟介绍javascript onclick事件
Jan 06 #Javascript
You might like
简单的PHP缓存设计实现代码
2011/09/30 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
jQuery 表格插件整理
2010/04/27 Javascript
firefox下input type="file"的size是多大
2011/10/24 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python 文件操作的详解及实例
2017/09/18 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python中的列表和元组区别分析
2020/12/30 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
求职信模板标准格式范文
2014/02/23 职场文书
无毒社区工作方案
2014/05/23 职场文书
寒山寺导游词
2015/02/03 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
详解Django中 render() 函数的使用方法
2021/04/22 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python