work for the surveyjs/private-tasks#375 (#8487)

surveyjs · Jul 1, 2024 · 0b8e608 · 0b8e608
1 parent ca92644
commit 0b8e608
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/dragdrop/choices.ts b/src/dragdrop/choices.ts
@@ -24,27 +24,15 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
     if(!draggedElementShortcut) return;
 
     // draggedElementShortcut.innerText = text;
-    draggedElementShortcut.style.cssText = ` 
-          cursor: grabbing;
-          position: absolute;
-          z-index: 10000;
-          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-        `;
+    draggedElementShortcut.className = "sv-drag-drop-choices-shortcut";
 
     const isDeepClone = true;
     const clone = <HTMLElement>(
       draggedElementNode
         .closest("[data-sv-drop-target-item-value]")
         .cloneNode(isDeepClone)
     );
-    clone.style.cssText = `
-      min-width: 100px;
-      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));
-      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;
-    `;
+    clone.classList.add("sv-drag-drop-choices-shortcut__content");
 
     const dragIcon: any = clone.querySelector(".svc-item-value-controls__drag-icon");
     dragIcon.style.visibility = "visible";

diff --git a/src/main.scss b/src/main.scss
@@ -1036,5 +1036,21 @@ body {
   }
 }
 
+.sv-drag-drop-choices-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+}
+
+.sv-drag-drop-choices-shortcut__content {
+  min-width: 100px;
+  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));
+  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;
+}
+
 @import "./main-default-theme.scss";
 @import "./default-styles.scss";