#5925 Raise onDragDropAllow event when user tries to drag into collap…

…sed panel Fixes #5925
surveyjs · Oct 1, 2024 · b3c748b · b3c748b
1 parent 9a35073
commit b3c748b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 5 deletions.
diff --git a/packages/survey-creator-core/src/survey-elements.ts b/packages/survey-creator-core/src/survey-elements.ts
@@ -306,7 +306,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     }
     return allowOptions.allow;
   }
-  public dragOverCore(dropTarget: ISurveyElement, dragOverLocation: DragTypeOverMeEnum): void {
+  public dragOverCore(dropTarget: ISurveyElement, dragOverLocation: DragTypeOverMeEnum, dragOverLocationIfNotAllowed: DragTypeOverMeEnum): void {
     const oldDragOverIndicatorElement = this.dragOverIndicatorElement;
     const oldDropTarget = this.dropTarget;
     if (this.isSameElement(dropTarget)) {
@@ -320,8 +320,16 @@ export class DragDropSurveyElements extends DragDropCore<any> {
       ? this.dropTarget
       : ((<any>this.dropTarget).page || (<any>this.dropTarget).__page);
     if (!this.isAllowDragOver(dropTarget, dragOverLocation)) {
-      this.allowDropHere = false;
-      return;
+      if (dragOverLocation != DragTypeOverMeEnum.InsideEmptyPanel) {
+        this.allowDropHere = false;
+        return;
+      }
+      dragOverLocation = dragOverLocationIfNotAllowed;
+      this.dragOverLocation = dragOverLocation;
+      if (!this.isAllowDragOver(dropTarget, dragOverLocation)) {
+        this.allowDropHere = false;
+        return;
+      }
     }
     if (dragOverLocation == DragTypeOverMeEnum.InsideEmptyPanel) {
       this.dragOverIndicatorElement = this.dropTarget;
@@ -362,7 +370,8 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     const dropTarget = this.getDropTargetByNode(dropTargetNode, event);
 
     if (!!oldInsideContainer != !!this.insideContainer) dropTarget.dragTypeOverMe = null;
-    let dragOverLocation = calculateDragOverLocation(event.clientX, event.clientY, dropTargetNode);
+    const dragOverLocationSide = calculateDragOverLocation(event.clientX, event.clientY, dropTargetNode);
+    let dragOverLocation = dragOverLocationSide;
     if (dropTarget && ((dropTarget.isPanel || dropTarget.isPage) && dropTarget.elements.length === 0 || isPanelDynamic(dropTarget) && dropTarget.template.elements.length == 0)) {
       if (dropTarget.isPage || this.insideContainer) {
         dragOverLocation = DragTypeOverMeEnum.InsideEmptyPanel;
@@ -381,7 +390,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
 
     this.allowDropHere = true;
 
-    this.dragOverCore(dropTarget, dragOverLocation);
+    this.dragOverCore(dropTarget, dragOverLocation, dragOverLocationSide);
   }
 
   protected onStartDrag(): void {

diff --git a/packages/survey-creator-core/tests/dragdrop-elements.tests.ts b/packages/survey-creator-core/tests/dragdrop-elements.tests.ts
@@ -1141,6 +1141,53 @@ test("Support onDragDropAllow, Bug#4572", (): any => {
   expect(counter).toBe(2);
   expect(ddHelper["allowDropHere"]).toBeTruthy();
 });
+
+test("Raise onDragDropAllow again if DragTypeOverMeEnum.InsideEmptyPanel is not allowed", (): any => {
+  const creator = new CreatorTester();
+  creator.JSON = {
+    "logoPosition": "right",
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question1"
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question2"
+          }
+        ]
+      }
+    ]
+  };
+  let counter: Array<string> = [];
+  creator.onDragDropAllow.add((sender, options) => {
+    if (!options.insertAfter && !options.insertBefore) {
+      counter.push("inside");
+      options.allow = false;
+    }
+    counter.push("not inside");
+    options.allow = true;
+  });
+  const ddHelper: any = creator.dragDropSurveyElements;
+  const q1 = creator.survey.getQuestionByName("question1");
+  const q2 = creator.survey.getQuestionByName("question2");
+  ddHelper.draggedElement = q2;
+  ddHelper["allowDropHere"] = true;
+  ddHelper.dragOverCore(q1, DragTypeOverMeEnum.InsideEmptyPanel, DragTypeOverMeEnum.Top);
+  expect(counter).toStrictEqual(["inside", "not inside"]);
+  counter = [];
+  ddHelper.dragOverCore(q1, DragTypeOverMeEnum.Top, DragTypeOverMeEnum.Top);
+  expect(counter).toStrictEqual(["not inside"]);
+});
+
 test("Support onDragDropAllow&allowDropNextToAnother, #5621", (): any => {
   const creator = new CreatorTester();
   creator.JSON = {