0
角度材料タブ(md-tabs)を持つ2つの別々のdivがあります。 angular drag and dropライブラリを使用して、あるタブから別のタブにコンテンツ(ボタン)をドラッグしようとしています。しかし、ドラッグしている間、ボタンは同じdivで動いています。すなわち、境界に到達した後にボタンが隠れている(オーバーフロー)。2つの角度材料タブの間にドラッグ&ドロップ
普通の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.
-->
この問題を解決するためのご支援に感謝。
感謝にあなたを追加しようと、CSSの問題です。あなたの修正は、スクロールバーなしで正常に動作します。私は同じ問題をmd-tabs-content-wrapperタグ(css:height:200px; overflow-x:hidden; overflow-y:scroll)に適用するときも同じ問題に直面しています。あなたはこのリンクを参照することができます:http://codepen.io/anon/pen/mWRqMZ –
私はあなたの答えAbdulを受け入れました。スクロールの問題で私を助けてもらえますか? –
あなたのabece codepenでは、私はスクロールコードを見つけられませんでした。スクロールで試しているcodepenを作成してください。 –