PR: Ranking: New Issues (#6772)

* work for the surveyjs/private-tasks#267 (animations)

* work for the surveyjs/private-tasks#267 (design time dnd with selectToRankEnabled)

* work for the surveyjs/private-tasks#267 (ui width issue)

* work for the surveyjs/private-tasks#267 (update screenshot)

* work for the surveyjs/private-tasks#267 (added u test)

src/common-styles/sv-ranking.scss

@@ -227,6 +227,9 @@
   .sv-ranking__container--empty {
     padding-top: calcSize(1);
     padding-bottom: calcSize(1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 
@@ -243,15 +246,23 @@
 
   .sv-ranking__container--empty {
     &.sv-ranking__container--to {
-      padding-right: calcSize(3);
+      //padding-right: calcSize(3);
 
       .sv-ranking-item {
         left: initial;
       }
+
+      .sv-ranking__container-placeholder {
+        padding-left: calcSize(5);
+      }
     }
 
     &.sv-ranking__container--from {
-      padding-left: calcSize(3);
+      //padding-left: calcSize(3);
+
+      .sv-ranking__container-placeholder {
+        padding-right: calcSize(5);
+      }
     }
   }
 }
@@ -263,17 +274,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
+  //width: 100%;
   height: 100%;
 }
 
 .sv-ranking__container {
   flex: 1;
-  max-width: 100%;
+  //max-width: 100%;
 }
 
 .sv-ranking__container--empty {
-  padding: calcSize(8);
+  //padding: calcSize(8);
   box-sizing: border-box;
   text-align: center;
 }

src/defaultV2-theme/blocks/sd-ranking.scss

@@ -29,4 +29,36 @@
 
 .sv-ranking-item__content.sd-ranking-item__content {
   line-height: calcLineHeight(1.5);
+}
+
+.sv-dragdrop-movedown {
+  transform: translate(0, 0);
+  animation: svdragdropmovedown 0.1s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes svdragdropmovedown {
+  0% {
+    transform: translate(0, -50px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+.sv-dragdrop-moveup {
+  transform: translate(0, 0);
+  animation: svdragdropmoveup 0.1s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes svdragdropmoveup {
+  0% {
+    transform: translate(0, 50px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
 }

src/dragdrop/choices.ts

@@ -106,7 +106,13 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
 
   private getVisibleChoices() {
     const parent = this.parentElement;
-    if (parent.getType() === "ranking") return <QuestionRankingModel>parent.rankingChoices;
+    if (parent.getType() === "ranking") {
+      if (parent.selectToRankEnabled) {
+        return parent.visibleChoices;
+      } else {
+        return <QuestionRankingModel>parent.rankingChoices;
+      }
+    }
     return parent.visibleChoices;
   }
 

tests/dragdrophelpertests.ts

@@ -365,4 +365,22 @@ QUnit.test("rows: check matrixdynamic d&d", function (assert) {
   ddHelper.clear();
   assert.strictEqual(question.renderedTable.rows[1].row, question.visibleRows[0]);
   assert.strictEqual(question.renderedTable.rows[3].row, question.visibleRows[1]);
+});
+
+QUnit.test("ranking selectToRank for ChoicesDND(creator)", function (assert) {
+  const json = {
+    questions: [
+      {
+        type: "ranking",
+        name: "q1",
+        selectToRankEnabled: true,
+        choices: ["item1", "item2", "item3", "item4"]
+      },
+    ],
+  };
+  const survey = new SurveyModel(json);
+
+  let ddHelper:any = new DragDropChoices(survey);
+  ddHelper.parentElement = survey.getQuestionByName("q1");
+  assert.equal(ddHelper["getVisibleChoices"]().length, 4);
 });