拖放两个角度材料标签之间

Question

我有两个单独的div角度材料标签（md-tabs）。使用angular drag and drop库，我试图将内容（按钮）从一个标签拖到另一个标签。但在拖动时，按钮与同一个div一起移动。即该按钮在到达边界后隐藏（溢出）。

如果我试图做正常的div相同，它工作正常。

我尝试更改按钮的位置和z索引，但它无法正常工作。

代码详情如下。 Demo

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