angular.js指令集实现模态框拖动效果
来源:互联网 发布:mysql 查询一年总数 编辑:程序博客网 时间:2024/06/05 09:09
define(['application-configuration'], function (app) {
"use strict";
app.directive('draggable', ['$document', function($document) {//模态框拖动指令
var startX = 0, startY = 0, x = 0, y = 0;
element= angular.element(document.getElementsByClassName("am-modal-dialog"));
element.css({
position: 'relative',
cursor: 'move'
});
element.on('mousedown', function(event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.clientX - x;
startY = event.clientY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
function mousemove(event) {
y = event.clientY - startY;
x = event.clientX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.off('mousemove', mousemove);
$document.off('mouseup', mouseup);
}
};
}])
return app;
});
<div class="am-modal-dialog" draggable>
亲测真实有效有点小问题,后期再修改。
阅读全文
0 0
- angular.js指令集实现模态框拖动效果
- angular.js 指令集实现模态框拖动(3)
- JS拖动效果实现
- js 实现拖动层效果
- JS+DIV 实现拖动效果
- angular.js模态框拖动(2)
- 转载一个js实现div拖动效果
- js 实现 鼠标拖动DIV 效果
- js实现动态拖动滚动条效果
- Angular.js 指令 & Controller
- 什么是angular js指令
- 创建angular js指令
- angular js自定义指令
- angular js指令详解
- Angular.js指令
- angular.js自定义指令
- js拖动效果
- js的拖动效果
- HttpRequest中常见的四种ContentType【转载】
- vim显示不可见特殊字符
- Java并发之AQS
- java中的抽象类abstract
- Ajax工作原理
- angular.js指令集实现模态框拖动效果
- LeetCode 389. Find the Difference (字符串比较)
- How to download dynamically loaded content using python
- 存储过程--oracle,sqlserver示例
- JUnit 从ClassLoader获取当前路径
- centos
- 2017年大三下-人工智能-Matlab-八数码问题
- Python 图形界面 Tkinter 实现倒计时
- java链接SFTP上传和下载