在兩個角度材質選項卡之間拖放

Question

我有兩個單獨的div，分別帶有角材料標簽（md-tabs）。 使用角度拖放庫，我試圖將內容（按鈕）從一個選項卡拖動到另一個。 但是在拖動時，按鈕與同一div一起移動。 即，按鈕到達邊界后即隱藏（溢出）。

如果我嘗試對普通div執行相同操作，則效果很好。

我嘗試更改按鈕的位置和z-index，但無法正常工作。

代碼詳細信息如下。 演示

 angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDragDrop']) .controller('AppCtrl', function($scope) { $scope.list1 = { title: 'md-tab - Dragd-me' }; $scope.list2 = {}; $scope.list3 = { title: 'Drag Me' }; $scope.list4 = {}; }); 

 .tabsdemoDynamicHeight md-content { background-color: transparent !important; } .tabsdemoDynamicHeight md-content md-tabs { background: #f6f6f6; border: 1px solid #e1e1e1; } .tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper { background: white; } .tabsdemoDynamicHeight md-content h1:first-child { margin-top: 0; } #md-tab1{ width: 400px; padding: 25px; border: 1px dotted blue; } #md-tab2{ width: 400px; padding: 25px; border: 1px dotted red; } .thumbnail { height: 280px !important; } .btn-droppable { width: 180px; height: 30px; padding-left: 4px; } .btn-draggable { width: 160px; } .emage { height: 215px; } ._md { overflow: hidden; } /* #btn1 { display: fixed !important; z-index: 9999; } */ 

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" /> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" rel="stylesheet" /> <link href="https://material.angularjs.org/1.1.3/docs.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script> <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script> <script src="https://cdn.rawgit.com/codef0rmer/angular-dragdrop/master/src/angular-dragdrop.js"></script> <div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp" ng-controller="AppCtrl"> <h1>With md-tab</h1> <div style="display: inline-flex;"> <md-content id="md-tab1"> <md-tabs md-dynamic-height="" md-border-bottom=""> <md-tab label="one"> <md-content class="md-padding"> <h1 class="md-display-2">Tab One</h1> <p>Move the button to the next tab.</p> <div id="btn1" class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div> </md-content> </md-tab> </md-tabs> </md-content> <md-content id="md-tab2"> <md-tabs md-dynamic-height="" md-border-bottom=""> <md-tab label="two"> <md-content class="md-padding"> <h1 class="md-display-2">Tab Two</h1> <div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'> <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div> </div> </md-content> </md-tab> </md-tabs> </md-content> </div> <h1>With-out md-tab</h1> <div style="display: inline-flex;"> <div id="md-tab1"> <p>Move the button to the next tab.</p> <div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list3" jqyoui-draggable="{animate:true}" ng-hide="!list3.title">{{list3.title}}</div> </div> <div id="md-tab2"> <h1 class="md-display-2">Tab Two</h1> <div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list4" jqyoui-droppable style='height:50px;'> <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list4.title">{{list4.title}}</div> </div> </div> </div> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. --> 

感謝您的支持以解決此問題。

Answer 1

這是CSS問題，請嘗試添加

  ._md, md-tab-content #md-tab1 .md-no-scroll,#md-tab1 md-tabs,md-tab-content.md-no-scroll {
   overflow: visible !important;
  }

  #md-tab2 md-tab-content,#md-tab2 md-tabs-content-wrapper,md-tabs.md-dynamic-height md-tabs-content-wrapper {
   z-index: 1;
  }