+ [cdkDragData]="schema"
+ (cdkDragStarted)="dragStarted($event)">
diff --git a/frontend/app/shared/components/schema-category.component.scss b/frontend/app/shared/components/schema-category.component.scss
index 69db35af9..385446329 100644
--- a/frontend/app/shared/components/schema-category.component.scss
+++ b/frontend/app/shared/components/schema-category.component.scss
@@ -42,6 +42,22 @@ $drag-margin: -8px;
}
}
+.cdk-drag-preview {
+ background: $color-dark2-background !important;
+
+ a {
+ color: $color-dark1-foreground !important;
+ }
+}
+
+.cdk-drag-placeholder {
+ display: none;
+}
+
+.cdk-drag-animating {
+ transition: none;
+}
+
.header {
line-height: 2rem;
margin-bottom: 0;
@@ -86,18 +102,6 @@ $drag-margin: -8px;
}
}
-.cdk-drag-preview {
- background: $color-dark2-background !important;
-
- a {
- color: $color-dark1-foreground !important;
- }
-}
-
-.cdk-drag-animating {
- transition: none;
-}
-
.schema {
&-name {
@include truncate;
diff --git a/frontend/app/shared/components/schema-category.component.ts b/frontend/app/shared/components/schema-category.component.ts
index 7d2bd7c52..2f80f2da9 100644
--- a/frontend/app/shared/components/schema-category.component.ts
+++ b/frontend/app/shared/components/schema-category.component.ts
@@ -5,12 +5,14 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, CdkDragStart } from '@angular/cdk/drag-drop';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { fadeAnimation, LocalStoreService, SchemaCategory, SchemaDto, SchemasList, SchemasState } from '@app/shared/internal';
import { AppsState } from '../state/apps.state';
import { Settings } from '../state/settings';
+const ITEM_HEIGHT = 3.125;
+
@Component({
selector: 'sqx-schema-category',
styleUrls: ['./schema-category.component.scss'],
@@ -83,6 +85,25 @@ export class SchemaCategoryComponent implements OnChanges {
}
}
+ public dragStarted(event: CdkDragStart) {
+ setTimeout(() => {
+ const dropContainer = event.source._dragRef['_dropContainer'];
+
+ if (dropContainer) {
+ dropContainer['_cacheOwnPosition']();
+ dropContainer['_cacheItemPositions']();
+ }
+ });
+ }
+
+ public getItemHeight() {
+ return `${ITEM_HEIGHT}rem`;
+ }
+
+ public getContainerHeight() {
+ return `${ITEM_HEIGHT * this.filteredSchemas.length}rem`;
+ }
+
public trackBySchema(_index: number, schema: SchemaDto) {
return schema.id;
}