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

Question

我有两个单独的 div，带有角度材料选项卡 (md-tabs)。使用angular drag and drop 库，我试图将内容（按钮）从一个选项卡拖到另一个选项卡。但是在拖动时，按钮会随着同一个 div 一起移动。即，按钮在到达边框后隐藏（溢出）。

如果我尝试对普通 div 做同样的事情，它工作正常。

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

代码详情如下。 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;
  }