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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jquery图形密码实现方法
Mar 11 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
JS实现贪吃蛇游戏
2019/11/15 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python pass 语句使用示例
2014/03/11 Python
python字符串中的单双引
2017/02/16 Python
Numpy之文件存取的示例代码
2018/08/03 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python事件驱动event实现详解
2018/11/21 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python中bisect的用法及示例详解
2020/07/20 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
成人教育自我鉴定
2013/11/01 职场文书
女大学生个人求职信
2013/12/09 职场文书
采购经理岗位职责
2014/02/16 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
初婚初育证明范本
2014/11/24 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL