제목 막대를 사용하여 각도 UI 모달 끌기

이 plunk에는 제목 막대가있는 각도 UI 모달이 있습니다. 목표는 제목 막대를 드래그하여 전체 모달을 드래그하는 것입니다. 모달은 사각형 (반경을 0으로 변경)이므로 제목 막대와 모달 모두 (위쪽, 왼쪽) 위치를 공유하지만 제목 표시 줄을 끌면 작동하지 않습니다. 어떤 아이디어?제목 막대를 사용하여 각도 UI 모달 끌기

HTML

<body ng-app="app" ng-controller="ctl"> 

    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="topbar">This is the title</div> 

     <div class="modal-header"> 
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3> 
     </div> 


     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
     </div> 
    </script> 

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 

    </body>

자바 스크립트

var app = angular.module("app", ['ui.bootstrap']); 
app.controller("ctl", function($scope,$uibModal,$timeout) { 


    var modalInstance; 
    $scope.open = function() { 
    modalInstance = $uibModal.open({ 
      animation: false, 
      windowClass: 'the-modal', 
      templateUrl: 'myModalContent.html' 
     }); 

     $timeout(function(){ 
      $('.topbar').draggable({ 
       drag: function(event, ui) { 
         $(".modal-content").offset({ 
             top: ui.position.top, 
             left: ui.position.left}); 
       } 
      }); 

     },10); 

    }; 

});

출처

2016-09-14 ps0604

$('.modal-content').draggable({ 
    drag: function(event, ui) { 
    if(event.toElement.className.indexOf("topbar") == -1) return false; 
    } 
});

'topbar'대신 만드는 위의 코드로 시도 드래그 만드는 '모달'드래그 만이 'topbar'를 클릭하여 드래그 할 때 .

출처

2016-09-14 12:03:31

이 방법이 효과적입니다. 커서를 위아래로 빠르게 드래그하면 커서가 막대 포커스를 잃고 끌기가 끝납니다. – ps0604

제목 막대를 사용하여 각도 UI 모달 끌기

답변

관련 문제