拖动指令bug修改(4)

指令用到项目中后,测试提了一个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);
                     }
                   
                }
                });
                
         


                }           
    }])
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值