angular.js模态框拖动(2)

//修改了一下,解决了之前的一些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);
                     }
                   
                }
                });
                
         


                }           
    }])
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值