• 技术文章 >web前端 >js教程

    angularjs创建弹出框实现拖动效果

    2016-06-01 09:54:41原创755
    本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下。

    由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现。

    .directive('draggable', ['$document', function($document) {
            return function(scope, element, attr) {
            var startX = 0, startY = 0, x = 0, y = 0;
            element= angular.element(document.getElementsByClassName("modal-dialog")); 
            element.css({
              position: 'relative',
              cursor: 'move'
            });
     
            element.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.css({
              top: y + 'px',
              left: x + 'px'
              });
            }
     
            function mouseup() {
              $document.off('mousemove', mousemove);
              $document.off('mouseup', mouseup);
            }
            };
      }]);
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js 弹出框 拖动
    上一篇:javascript bold()将字体加粗 下一篇:js确认框confirm()三种使用方法
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 浅析IDEA中如何开发Angular• Angular的:host、:host-context、::ng-deep选择器• 四种方法搞定JavaScript创建多个对象• 什么是异步资源?浅析Node实现异步资源上下文共享的方法• 什么是变更检测?聊聊angular的变更机制
    1/1

    PHP中文网