在两个角度材质选项卡之间拖放

Question

I've two separate div's with angular-material tabs (md-tabs). Using angular drag and drop library, I'm trying to drag the content (button) from one Tabs to another. But while dragging, the button is moving along with the same div. ie, the button is hiding after it reaches the border (overflow).

If I try to do the same with normal div, it is working fine.

I try to change the position and z-index of the button, but it didn't work properly.

The code details is below. 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. --> 

Appreciate your support to fix this.

Answer 1

this is css issue, try to add

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