Dragging Angular UI modal mit Titelleiste

In diesem habe ich ein Angular UI Modal mit einer Titelleiste. Ziel ist es, das gesamte Modal durch Ziehen der Titelleiste zu ziehen. Sowohl die Titelleiste als auch das Modal teilen sich die Position (oben, links), da das Modal ein Rechteck ist (ich habe den Radius auf Null geändert), aber wenn ich die Titelleiste ziehe, funktioniert es nicht. Irgendwelche Ideen?Dragging Angular UI modal mit Titelleiste

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>

Javascript

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); 

    }; 

});

Quelle

2016-09-14 ps0604

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

Versuchen mit obigen Code, anstatt, 'topbar' ziehbar machen die 'modal' ziehbar nur dann, wenn sie gezogen, indem die 'topbar' klicken .

Quelle

2016-09-14 12:03:31

Dies funktioniert, das einzige Detail ist, dass, wenn Sie schnell nach oben und unten ziehen der Cursor den Fokus verliert und der Ziehvorgang endet. – ps0604

Dragging Angular UI modal mit Titelleiste

Antwort

Verwandte Themen