#5985 Drag-drop indicator disappears between questions and panels

Fixes #5985
surveyjs · Oct 23, 2024 · 9bf9d0e · 9bf9d0e
1 parent 3f491d0
commit 9bf9d0e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -38,6 +38,18 @@ svc-question {
       }
     }
   }
+  &:before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    margin-top: calcSize(-2);
+    padding-top: calcSize(2);
+    margin-left: calcSize(-2);
+    padding-left: calcSize(2);
+    bottom: 0;
+    right: 0;
+  }
 }
 
 .svc-question__adorner {
@@ -584,7 +596,7 @@ svc-question {
 }
 
 .svc-question__drop-indicator--top {
-  top: -9px;
+  top: -8px;
 }
 
 .svc-question__drop-indicator--bottom {

diff --git a/testCafe/designer/drag-drop.ts b/testCafe/designer/drag-drop.ts
@@ -1914,6 +1914,53 @@ test("Drag Drop indicator - rows", async (t) => {
     .expect(Selector(".svc-row").nth(1).hasClass("svc-row--drag-over-bottom")).notOk();
 });
 
+test("Drag Drop indicator - between questions", async (t) => {
+  await t.resizeWindow(1600, 1000);
+  const json = {
+    "logoPosition": "right",
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question1"
+          },
+          {
+            "type": "text",
+            "name": "question2",
+            "startWithNewLine": false
+          },
+          {
+            "type": "text",
+            "name": "question3"
+          }
+        ]
+      }
+    ]
+  };
+  await setJSON(json);
+
+  const toolboxToolAction = Selector(".svc-toolbox__tool > .sv-action__content");
+
+  await t.expect(Selector(".svc-question__adorner").visible).ok();
+
+  const questionRectRight = await Selector(".svc-question__adorner").getBoundingClientRectProperty("right");
+  const questionRectBottom = await Selector(".svc-question__adorner").getBoundingClientRectProperty("bottom");
+  await t
+    .hover(toolboxToolAction)
+    .dispatchEvent(toolboxToolAction, "pointerdown")
+    .hover(Selector("#survey-creator"), { offsetX: Math.round(questionRectRight) + 8, offsetY: Math.round(questionRectBottom) - 100 })
+    .expect(Selector(".svc-question__content").nth(1).hasClass("svc-question__content--drag-over-left")).ok();
+
+  await t
+    .hover(toolboxToolAction)
+    .dispatchEvent(toolboxToolAction, "pointerdown")
+    .hover(Selector("#survey-creator"), { offsetX: Math.round(questionRectRight) - 100, offsetY: Math.round(questionRectBottom) + 8 })
+    .expect(Selector(".svc-question__content").nth(2).hasClass("svc-question__content--drag-over-top")).ok();
+
+});
+
 test("Drag Drop page with other pages collapsed on start drag", async (t) => {
   await ClientFunction(() => {
     window["creator"].expandCollapseButtonVisibility = "always";