diff --git a/packages/survey-core/src/default-theme/blocks/sv-drag-drop.scss b/packages/survey-core/src/default-theme/blocks/sv-drag-drop.scss index e6890a76e0..6ca20dd0c0 100644 --- a/packages/survey-core/src/default-theme/blocks/sv-drag-drop.scss +++ b/packages/survey-core/src/default-theme/blocks/sv-drag-drop.scss @@ -111,4 +111,14 @@ border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px))); padding-right: calc(2* var(--sjs-base-unit, var(--base-unit, 8px))); margin-left: 0; +} + +.sv-drag-drop-image-picker-shortcut { + cursor: grabbing; + position: absolute; + z-index: 10000; + box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)); + background-color: var(--sjs-general-backcolor, var(--background, #fff)); + padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))); + border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))); } \ No newline at end of file diff --git a/packages/survey-core/src/dragdrop/choices.ts b/packages/survey-core/src/dragdrop/choices.ts index be08b2b427..4304f7a8dc 100644 --- a/packages/survey-core/src/dragdrop/choices.ts +++ b/packages/survey-core/src/dragdrop/choices.ts @@ -21,7 +21,7 @@ export class DragDropChoices extends DragDropCore { return this.createImagePickerShortcut(this.draggedElement, text, draggedElementNode, event); } const draggedElementShortcut: any = DomDocumentHelper.createElement("div"); - if(!draggedElementShortcut) return; + if (!draggedElementShortcut) return; // draggedElementShortcut.innerText = text; draggedElementShortcut.className = "sv-drag-drop-choices-shortcut"; @@ -64,17 +64,9 @@ export class DragDropChoices extends DragDropCore { private createImagePickerShortcut(item: ImageItemValue, text: string, draggedElementNode: HTMLElement, event: PointerEvent) { const draggedElementShortcut: any = DomDocumentHelper.createElement("div"); - if(!draggedElementShortcut) return; - - draggedElementShortcut.style.cssText = ` - cursor: grabbing; - position: absolute; - z-index: 10000; - box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)); - background-color: var(--sjs-general-backcolor, var(--background, #fff)); - padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))); - border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))); - `; + if (!draggedElementShortcut) return; + + draggedElementShortcut.classList.add("sv-drag-drop-image-picker-shortcut"); const itemValueNode = draggedElementNode.closest("[data-sv-drop-target-item-value]"); this.imagepickerControlsNode = itemValueNode.querySelector(".svc-image-item-value-controls"); @@ -223,7 +215,7 @@ export class DragDropChoices extends DragDropCore { } public clear(): void { - if(!!this.parentElement) { + if (!!this.parentElement) { this.updateVisibleChoices(this.parentElement); } if (!!this.imagepickerControlsNode) {