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前端图片加载管理器imagepool使用详解
Dec 29 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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/01 无线电
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php实现递归的三种基本方式
2020/07/04 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
js运动事件函数详解
2016/10/21 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
Python 的描述符 descriptor详解
2016/02/27 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
浅析python中while循环和for循环
2019/11/19 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
运动会广播稿400字
2014/01/25 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2015年教师节活动总结
2015/03/20 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
SQL Server中的游标介绍
2022/05/20 SQL Server