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 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript中的this详解
Dec 08 Javascript
js使用递归解析xml
Dec 12 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
一个javascript参数的小问题
2008/03/02 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
keras之权重初始化方式
2020/05/21 Python
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
机关单位动员会主持词
2014/03/20 职场文书
新手上路标语
2014/06/20 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
医院岗前培训心得体会
2016/01/08 职场文书