Merge pull request #9381 from surveyjs/feature/7368-dnd-abandon-inlin…

…e-styles PR: Drag-Drop: Refactoring: Abandon Inline Styles
surveyjs · Jan 31, 2025 · cba0006 · cba0006
2 parents eaaaa43 + 96bbcbf
commit cba0006
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
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
@@ -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)));
 }
diff --git 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<QuestionSelectBase> {
       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<QuestionSelectBase> {
 
   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<QuestionSelectBase> {
   }
 
   public clear(): void {
-    if(!!this.parentElement) {
+    if (!!this.parentElement) {
       this.updateVisibleChoices(this.parentElement);
     }
     if (!!this.imagepickerControlsNode) {