angular.js模态框拖动(2)
来源:互联网 发布:jquery.cookie.js插件 编辑:程序博客网 时间:2024/06/04 00:54
//修改了一下,解决了之前的一些bug,还有一个最为重要的bug有待解决,先记录下来,后期再完善,仅供参考。
.directive('draggable', ['$document', function($document) { //模态框拖动指令
return function(scope, element, attr) {var startX = 0, startY = 0, x = 0, y = 0;
element= angular.element(document.getElementsByClassName("am-modal-dialog"));
angular.forEach(element, function(data,index){
if(element.eq(index).attr("draggable")){
element.eq(index).find("div").eq(0).css({
position: 'relative',
cursor: 'move'
});
//按下鼠标左键
element.eq(index).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.eq(index).css({
top: y + 'px',
left: x + 'px'
});
}
//松开鼠标
function mouseup() {
$document.off('mousemove', mousemove);
$document.off('mouseup', mouseup);
}
}
});
}
}])
阅读全文
0 0
- angular.js模态框拖动(2)
- angular.js 指令集实现模态框拖动(3)
- angular.js指令集实现模态框拖动效果
- JS实现拖动(2)
- angular.js学习(2)--filter
- Angular.js(一)
- Angular.js(二)
- Angular.js(三)
- Angular.js(四)
- Angular.js(五)
- Angular.js(六)
- Angular.js(七)
- (二)angular.js
- Js拖动效果(例2)
- angular js尝试(二)
- 浅谈Angular.js(一)
- JS实现拖动(1)
- angular.js学习(2)--service和provider
- MQ消息完整流程
- springboot filter使用配置
- springmvc后台如何给前台传json数据
- Go开发之对工程的安排处理
- 使用block和协议实现网络层的封装
- angular.js模态框拖动(2)
- Go游戏服务器开发的一些思考(十):goroutine和coroutine
- 配置lamp环境
- mysql优化,不用怕面试题了
- sqlserver突然出现“远程过程调用失败”
- 静态库与共享库
- 牛顿法
- CheckBox选择按钮
- 生成素数表