From 1bc25d8a9a5ff76e79bc3d54a88319fcacdbbbee Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Sun, 20 Nov 2022 15:05:35 +0100
Subject: [PATCH] Improve styling of dragImage
#309
---
.../components/input-elements/drop-list.component.ts | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index ff617599c..c8249ea95 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -106,7 +106,7 @@ export class DropListComponent extends FormElementComponent implements OnInit, A
if (dragEvent.dataTransfer) {
dragEvent.dataTransfer.effectAllowed = 'copyMove';
dragEvent.dataTransfer.setDragImage(
- DropListComponent.createDragImage(dragEvent.target as Node, dropListValueElement.id), 0, 0);
+ this.createDragImage(dragEvent.target as HTMLElement, dropListValueElement.id), 0, 0);
}
// Sadly timeout is necessary for Chrome, which does not allow DOM manipulation on dragstart
@@ -135,10 +135,14 @@ export class DropListComponent extends FormElementComponent implements OnInit, A
});
}
- static createDragImage(baseElement: Node, baseID: string): HTMLElement {
+ createDragImage(baseElement: HTMLElement, baseID: string): HTMLElement {
const dragImage: HTMLElement = baseElement.cloneNode(true) as HTMLElement;
dragImage.id = `${baseID}-dragimage`;
- dragImage.style.display = 'inline-block';
+ dragImage.style.display = 'block';
+ dragImage.style.width = `${(baseElement as HTMLElement).offsetWidth}px`;
+ dragImage.style.fontSize = `${this.elementModel.styling.fontSize}px`;
+ dragImage.style.borderRadius = '5px';
+ dragImage.style.padding = '10px';
document.body.appendChild(dragImage);
return dragImage;
}
--
GitLab