web-dev-qa-db-ja.com

AngularUIモーダルはドラッグ可能でサイズ変更が可能

ディレクティブでラップされたangleUiモーダルウィンドウがあります：

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

モーダルをドラッグ可能かつサイズ変更可能にしたい。インターネットで検索したところ、ドラッグ可能を実装するための次のソリューションを見つけることができました。

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

これは重要な部分です。

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

しかし、私の例では動作させることができませんでした。誰かがこれで私を助けることができますか？ （ブートストラップの代わりに）ディレクティブにラップされたjqueryuiモーダルを使用することは可能でしょうか？私はjavascriptが得意ではないので、両方のオプションを使用した実際の例には非常に優れています。ありがとう

編集：

Jqueryui参照を追加し、次の行を追加してモーダルドラッグ可能に管理しました。

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

問題は、この行をいつ追加するかわからないことです。今のところ、私はキャンセルメソッドにこれを追加しました（単に機能させるため）：

$ scope.cancel = function（）{$（ "。modal-dialog"）。draggable（）; };

そのため、モーダルを開いたときにcancelを呼び出す必要があり、その場合のみモーダルをドラッグできます。以前に呼び出した場合、.modal-dialogは存在しません。提案？

更新されたプランカー： http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

私は少し欠けていますが、誰かが実際の例を提供できますか？

angularjsjquery-uimodal-dialogangular-ui-bootstrap
20
Mdb

モーダルドラッグ可能にするネイティブディレクティブを作成しました。 AngularJsとjQueryのみが必要です。ディレクティブはUi-Bootstrapモーダルの「modal-dialog」クラスを使用し、ヘッダー内のモーダルのみを移動できます。

.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);
            });
        });    
     }
  }  
});
16
squadwuschel

組み込みテンプレートを変更したくない場合は、modalWindowをターゲットとするディレクティブを記述できます。

.directive('modalWindow', function(){
    return {
      restrict: 'EA',
      link: function(scope, element) {
        element.draggable();
      }
    }  
  });

JQueryとjQuery UIの両方を読み込む必要があることに注意してくださいbeforeAngularJSスクリプト。

[〜＃〜] note [〜＃〜]：Angular UI bootstrap @valepuのおかげで、「modalWindow」が「uibModalWindow」になります。

9
pkozlowski.opensource

上記の2つの答えを組み合わせて、モーダルドラッグ可能にしました。

.directive('modalWindow', function(){
  return {
    restrict: 'EA',
    link: function(scope, element) {
      $(".modal-dialog").draggable();
    }
  }  
});
5
Manas

an Angular UIモーダル、ドラッグ可能なタイトルバー付き

注：AngularJSスクリプトの前にjQueryとjQuery UIの両方をロードする必要があります。

angular.module('xxApp')
    .directive('uibModalWindow', function () {
        return {
            restrict: 'EA',
            link: function (scope, element) {
                $('.modal-content').draggable({handle: ".modal-header"});
            }
        }
    });
1
dzcxzl

使用してみてください

$(elem).closest('div.modal-dialog').draggable();

リンク機能で

0
Ramu

あなたの例をありがとう。あなたのコードを少し磨いて、これが私の最終結果です。私のソリューションにそれは完璧に動作します:-)

HTML：

<div class="draggableModal ui-widget-content">

   <div class="modal-header">
     ...    
   </div>
</div>

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

            var clickPosition = null;
            var clickOffset = null;

            header[0].addEventListener('mousedown', function (position) {

                clickPosition = position;
                clickOffset = position;

                window.addEventListener('mouseup', mouseUpEvent);
                window.addEventListener('mousemove', mouseMoveEvent);
            });

            function mouseUpEvent() {
                clickPosition = null;
                window.removeEventListener('mouseup', mouseUpEvent);
                window.removeEventListener('mousemove', mouseMoveEvent);
            }

            function mouseMoveEvent(position) {

                var offset = modalDialog.parents().offset();

                $("." + draggableStr, modalDialog.parents()).offset({
                    left: clickPosition.pageX + (position.pageX - clickPosition.pageX) - clickOffset.offsetX,
                    top: clickPosition.pageY + (position.pageY - clickPosition.pageY) - clickOffset.offsetY,
                });

                clickPosition = position;
            }


        }
    };

    return definition;
});
0
Ivanhoe