From d3465f93c9d3fe2a23eb05d3942e82f49dfbe9eb Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Tue, 30 Apr 2024 14:47:34 +0400
Subject: [PATCH] work for the
 https://github.com/surveyjs/survey-library/issues/8056

---
 src/common-styles/sv-ranking.scss | 14 +++++++++++++-
 src/dragdrop/ranking-choices.ts   | 11 -----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
index 3852f09f6a..c946734360 100644
--- a/src/common-styles/sv-ranking.scss
+++ b/src/common-styles/sv-ranking.scss
@@ -64,7 +64,7 @@
 .sv-ranking-item--preview.sv-ranking-item--preview {
   cursor: initial;
   user-select: initial;
-    -webkit-user-select: initial;
+  -webkit-user-select: initial;
 
   .sv-ranking-item__icon-container.sv-ranking-item__icon-container {
     .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -248,6 +248,18 @@
   }
 }
 
+.sv-ranking-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: 100px;
+  max-width: 400px;
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+}
+
 .sv-ranking--select-to-rank {
   display: flex;
 }
diff --git a/src/dragdrop/ranking-choices.ts b/src/dragdrop/ranking-choices.ts
index b8fbcf54d8..88964d6add 100644
--- a/src/dragdrop/ranking-choices.ts
+++ b/src/dragdrop/ranking-choices.ts
@@ -17,17 +17,6 @@ export class DragDropRankingChoices extends DragDropChoices {
     if(!draggedElementShortcut) return;
 
     draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-    draggedElementShortcut.style.cssText = ` 
-          cursor: grabbing;
-          position: absolute;
-          z-index: 10000;
-          border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-          min-width: 100px;
-          max-width: 400px;
-          box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-          background-color: var(--sjs-general-backcolor, var(--background, #fff));
-          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-        `;
 
     const isDeepClone = true;
     const clone = <HTMLElement>draggedElementNode.cloneNode(isDeepClone);