angular.js 指令集实现模态框拖动（3）

来源：互联网发布：华为程序员工资多少编辑：程序博客网时间：2024/06/04 22:22

这次的指令集在之前的版本上进行了修改，新增了把柄拖动，解决了鼠标禁用后文本框，文本域，下拉框无法点击的bug，

解决方法参照贴吧http://tieba.baidu.com/p/3555594452；限定了模态框拖动的范围。

该指令集仅供参考，欢迎大家提意见。

.directive('draggable', ['$document', function($document) { //模态框拖动指令

return function(scope, element, attr) {
var startX = 0, startY = 0, x = 0, y = 0;
var pageHeight=document.body.offsetHeight;
var pageWidth=document.body.offsetWidth;
element= angular.element(document.getElementsByClassName("am-modal-dialog"));
angular.forEach(element, function(data,index){
if(element.eq(index).attr("draggable")){
element.eq(index).find(".am-modal-hd").css({
position: 'relative',
cursor: 'move'
});

//按下鼠标左键
element.eq(index).find(".am-modal-hd").on('mousedown', function(event) {//拖拽手柄
// Prevent default dragging of selected content
var tagName=event.target.tagName.toLowerCase();
if(!(tagName=="input"||tagName=="textarea"||tagName=="select")){//在mousedown事件的注册在捕获目标的阶段，若判断目标不是文本框，文本域或是下拉框，对事件进行拦截。
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;
var eleHeight=element.eq(index).height();//获取模态框高度
var eleWidth=element.eq(index).width();//获取模态框宽度
var maxHeight=(pageHeight-eleHeight)/2;

var maxWidth=(pageWidth-eleWidth)/2;

//判断模态框移动的位移距离，限定模态框的拖动范围从而确保模态框不会移出屏幕外

if(y<-maxHeight){
y=-maxHeight;
}else if(y>maxHeight){
y=maxHeight;
}
if(x<-maxWidth){
x=-maxWidth;
}else if(x>maxWidth){
x=maxWidth;
}
element.eq(index).css({
top: y + 'px',
left: x + 'px'
});
}
//松开鼠标
function mouseup() {
$document.off('mousemove', mousemove);
$document.off('mouseup', mouseup);
}

}
});

}
}])

阅读全文

0 0