work for the #5328

src/dragdrop/ranking-select-to-rank.ts

@@ -17,6 +17,10 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     return super.findDropTargetNodeByDragOverNode(dragOverNode);
   }
 
+  protected getDropTargetByDataAttributeValue(dataAttributeValue: string): ItemValue {
+    return this.parentElement.rankingChoices[dataAttributeValue] || this.parentElement.unRankingChoices[dataAttributeValue];
+  }
+
   protected getDropTargetByNode(
     dropTargetNode: HTMLElement,
     event: PointerEvent
@@ -25,14 +29,18 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
       return "to-container";
     }
 
+    if (dropTargetNode.closest("[data-ranking='from-container']")) {
+      return "from-container";
+    }
+
     return super.getDropTargetByNode(dropTargetNode, event);
   }
 
   protected isDropTargetValid(
     dropTarget: ItemValue | string,
     dropTargetNode?: HTMLElement
   ): boolean {
-    if (dropTarget === "to-container") {
+    if (dropTarget === "to-container" || dropTarget === "from-container") {
       return true;
     } else {
       return super.isDropTargetValid(<ItemValue>dropTarget, dropTargetNode);
@@ -47,35 +55,33 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     let fromIndex;
     let toIndex;
 
-    if (this.dropTarget === "to-container" && rankingChoices.length === 0) {
+    if (this.isDraggedElementUnranked) {
       fromIndex = unRankingChoices.indexOf(this.draggedElement);
-      toIndex = 0;
-      this.selectToRank(questionModel, fromIndex, toIndex);
-      this.doUIEffects(dropTargetNode, fromIndex, toIndex);
-      return;
-    }
-
-    if (!this.isDraggedElementOrdered && this.isDropTargetElementOrdered) {
-      fromIndex = unRankingChoices.indexOf(this.draggedElement);
-      toIndex = rankingChoices.indexOf(this.dropTarget);
+      if (rankingChoices.length === 0) {
+        toIndex = 0;
+      } else {
+        toIndex = rankingChoices.indexOf(this.dropTarget);
+      }
       this.selectToRank(questionModel, fromIndex, toIndex);
       this.doUIEffects(dropTargetNode, fromIndex, toIndex);
       return;
     }
 
-    if (this.isDraggedElementOrdered && this.isDropTargetElementOrdered) {
+    if (this.isDraggedElementRanked && this.isDropTargetRanked) {
       fromIndex = rankingChoices.indexOf(this.draggedElement);
       toIndex = rankingChoices.indexOf(this.dropTarget);
-      unRankingChoices.splice(fromIndex, 1);
-      rankingChoices.splice(toIndex, 0, this.draggedElement);
-      this.parentElement.setPropertyValue("rankingChoices", rankingChoices);
+      this.reorderRankedItem(questionModel, fromIndex, toIndex);
       this.doUIEffects(dropTargetNode, fromIndex, toIndex);
       return;
     }
 
-    if (this.isDraggedElementOrdered && !this.isDropTargetElementOrdered) {
+    if (this.isDraggedElementRanked && !this.isDropTargetRanked) {
       fromIndex = rankingChoices.indexOf(this.draggedElement);
-      toIndex = unRankingChoices.indexOf(this.dropTarget);
+      if (unRankingChoices.length === 0) {
+        toIndex = 0;
+      } else {
+        toIndex = unRankingChoices.indexOf(this.dropTarget);
+      }
       this.unselectFromRank(questionModel, fromIndex);
       this.doUIEffects(dropTargetNode, fromIndex, toIndex);
       return;
@@ -100,14 +106,22 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     }
   }
 
-  private get isDraggedElementOrdered() {
+  private get isDraggedElementRanked() {
     return this.parentElement.rankingChoices.indexOf(this.draggedElement) !== -1;
   }
 
-  private get isDropTargetElementOrdered() {
+  private get isDropTargetRanked() {
     return this.parentElement.rankingChoices.indexOf(this.dropTarget) !== -1;
   }
 
+  private get isDraggedElementUnranked() {
+    return !this.isDraggedElementRanked;
+  }
+
+  private get isDropTargetUnranked() {
+    return !this.isDropTargetRanked;
+  }
+
   // protected doClear = (): void => {
   //   this.parentElement.dropTargetNodeMove = null;
   //   this.parentElement.updateRankingChoices(true);
@@ -128,4 +142,13 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     rankingChoices.splice(fromIndex, 1);
     questionModel.setPropertyValue("rankingChoices", rankingChoices);
   }
+
+  public reorderRankedItem(questionModel: QuestionRankingModel, fromIndex: number, toIndex: number): void {
+    const rankingChoices = questionModel.rankingChoices;
+    const item = rankingChoices[fromIndex];
+
+    rankingChoices.splice(fromIndex, 1);
+    rankingChoices.splice(toIndex, 0, item);
+    questionModel.setPropertyValue("rankingChoices", rankingChoices);
+  }
 }

tests/dragdrophelpertests.ts

@@ -274,11 +274,23 @@ QUnit.test("DragDropRankingSelectToRank : selectToRank", function (assert) {
 });
 
 QUnit.test("DragDropRankingSelectToRank unselectFromRank", function (assert) {
+  const withDefaultValue = true;
   const dndModel = new DragDropRankingSelectToRank();
-  const questionModel = createRankingQuestionModel(true);
+  const questionModel = createRankingQuestionModel(withDefaultValue);
 
   dndModel.unselectFromRank(questionModel, 1);
   assert.equal(questionModel.unRankingChoices.length, 2, "unRankingChoices count");
   assert.equal(questionModel.rankingChoices.length, 1, "rankingChoices count");
 });
+
+QUnit.test("DragDropRankingSelectToRank reorderRankedItem", function (assert) {
+  const withDefaultValue = true;
+  const dndModel = new DragDropRankingSelectToRank();
+  const questionModel = createRankingQuestionModel(withDefaultValue);
+
+  dndModel.reorderRankedItem(questionModel, 0, 1);
+  assert.equal(questionModel.rankingChoices[0].value, "22", "item 1 is correct");
+  assert.equal(questionModel.rankingChoices[1].value, "33", "item 2 is correct");
+  assert.equal(questionModel.rankingChoices.length, 2, "rankingChoices count");
+});
 // EO SelectToRank