指令用到项目中后,测试提了一个bug,在浏览器中input框,文本域等输入框中光标聚焦有问题,经过排查,发现是用来过滤元素的draggable属性的问题。换了个属性名解决问题。
.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-jw")){
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+(9/10)*eleHeight){//下移动
y=maxHeight+(9/10)*eleHeight;
}
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);
}
}
});
}
}])