AngularUI 模态可拖动和调整大小 [英] AngularUI modal to be draggable and resizable

查看：28 发布时间：2021/11/10 4:04:23 angularjs jquery-ui modal-dialog angular-ui-bootstrap

本文介绍了AngularUI 模态可拖动和调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含在指令中的 angularUi 模态窗口:

html:

<html ng-app="plunker"><头><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script><script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script><script src="main.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="样式表"><身体><div my-modal="{ data: 'test2'}">test2</div></html>

javascript:

angular.module('plunker', ['ui.bootstrap', 'myModal']);angular.module("myModal", []).directive("myModal", function ($modal) {严格使用"；返回 {模板:'<div ng-click="clickMe(rowData)" ng-transclude></div>',替换:真的，转置:真实，范围: {rowData: '&myModal'},链接:函数(范围、元素、属性){scope.clickMe = 函数 () {$modal.open({模板:<div>创建者:"+ scope.rowData().data +</div>"+ ""+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"+ "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"+ "</div>",控制器:函数($scope，$modalInstance){$scope.ok = 函数 () {$modalInstance.close({ test: "test"});};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};}});}}};});

plunker:http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

我想让模态可拖动和调整大小.我通过互联网搜索并能够找到以下实现可拖动的解决方案:

http://plnkr.co/edit/jHS4SJ?p=preview

这是重要的部分:

app.directive('dragable', function(){返回 {限制:'A'，链接:功能(范围，元素，属性){$(elem).draggable();}}});

但无法使其与我的示例一起使用.有人可以帮我弄这个吗?我想知道是否可以使用包含在指令中的 jqueryui 模式(而不是引导程序)?我不太擅长 javascript，并且对于具有这两种选项的任何工作示例都非常有用.谢谢

我添加了 jqueryui 引用并通过添加以下行设法使模态可拖动:

 $(".modal-dialog").draggable();

问题是我不确定何时添加此行.现在我在取消方法中添加了这个(只是为了让它工作):

$scope.cancel = 函数 () {$(".modal-dialog").draggable();};

所以当模态打开时，我需要调用取消，然后模态才可以拖动.如果我更早调用它 .modal-dialog 不存在.建议?

更新的plunker:http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

我遗漏了一些东西，有人可以提供工作示例吗?

解决方案

我创建了一个原生指令来使模态可拖动.你只需要 AngularJs 和 jQuery.该指令使用 Ui-Bootstrap 模态中的模态对话框"类，您只能在标题中移动模态.

.directive('modalDialog', function(){返回 {限制:'交流'，链接:函数($scope，元素){var draggableStr = "draggableModal";var header = $(".modal-header", element);header.on('mousedown', (mouseDownEvent) => {var modalDialog = element;var offset = header.offset();modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {$("." + draggableStr, modalDialog.parents()).offset({顶部:mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top)，左:mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)});}).on('mouseup', () => {modalDialog.removeClass(draggableStr);});});}}});

I have an angularUi modal window wrapped in a directive:

html:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="main.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div my-modal="{ data: 'test2'}">test2</div>

  </body>
</html>

javascript:

angular.module('plunker', ['ui.bootstrap', 'myModal']);

angular.module("myModal", []).directive("myModal", function ($modal) {
    "use strict";
    return {
      template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
      replace: true,
      transclude: true,
      scope: {
        rowData: '&myModal' 
      },
      link: function (scope, element, attrs) {
        scope.clickMe = function () {
            $modal.open({
            template: "<div>Created By:" + scope.rowData().data + "</div>"
                        + "<div class=\"modal-footer\">"
                        + "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
                        + "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
                        + "</div>",
            controller: function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close({ test: "test"});
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
        }
      }
    };
});

plunker: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

I want to make the modal draggable and resizable. I searched through the internet and was able to find the following solution for implementing draggable:

http://plnkr.co/edit/jHS4SJ?p=preview

This is the important part:

app.directive('dragable', function(){   
  return {
    restrict: 'A',
    link : function(scope,elem,attr){
      $(elem).draggable();
    }
  }  
});

but was not able to make it work with my example. Can someone help me with this? I wonder is it possible to use jqueryui modal wrapped in a directive (instead of bootstrap) ? I am not very good at javascript and will be very greatefull for any working example with both options. Thanks

EDIT:

I added jqueryui reference and managed to make the modal draggable by adding this line:

 $(".modal-dialog").draggable();

The problem is that I am not sure when to add this line. In the moment I have added this in the cancel method (just to make it work):

$scope.cancel = function () { $(".modal-dialog").draggable(); };

So when the modal is opened I need to call cancel and only then the modal is draggable. If I call it earlier the .modal-dialog does not yer exist. Suggestions?

updated plunker: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

I am missing something little, can someome provide working example ?

解决方案

I've created a native directive to make the modal draggable. You only need AngularJs and jQuery. The Directive uses the "modal-dialog" class from Ui-Bootstrap modal and you can only move the modal in the header.

.directive('modalDialog', function(){
  return {
    restrict: 'AC',
    link: function($scope, element) {
        var draggableStr = "draggableModal";
        var header = $(".modal-header", element);

        header.on('mousedown', (mouseDownEvent) => {
          var modalDialog = element;
          var offset = header.offset();

          modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
                $("." + draggableStr, modalDialog.parents()).offset({
                    top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
                    left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
                });
            }).on('mouseup', () => {
                 modalDialog.removeClass(draggableStr);
            });
        });    
     }
  }  
});

这篇关于AngularUI 模态可拖动和调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularUI 模态可拖动和调整大小 [英] AngularUI modal to be draggable and resizable

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

AngularUI 模态可拖动和调整大小 [英] AngularUI modal to be draggable and resizable

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭