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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
动态加载jquery库的方法
Feb 12 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
原生js实现吸顶效果
Mar 13 Javascript
axios学习教程全攻略
Mar 26 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python中的多重继承实例讲解
2014/09/28 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python网站验证码识别
2016/01/25 Python
python爬取指定微信公众号文章
2018/12/20 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
学生实习证明模板汇总
2014/09/25 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
三好学生评语大全
2014/12/29 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
教育教学读书笔记
2015/07/02 职场文书
职工食堂管理制度
2015/08/06 职场文书
教育教学工作反思
2016/02/24 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
mysql的Buffer Pool存储及原理
2022/04/02 MySQL