PR: Ranking: Devices: Elemets Rendered Incorrectly

src/dragdrop/dom-adapter.ts

@@ -37,6 +37,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
   // save event.target node from the frameworks update. See  https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed
   private savedTargetNode: any;
   private savedTargetNodeParent: any;
+  private savedTargetNodeIndex: any;
   private scrollIntervalId: number = null;
 
   constructor(private dd: IDragDropEngine, private longTap: boolean = true) {}
@@ -100,6 +101,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
           clip: rect(1px, 1px, 1px, 1px);
         `;
         this.savedTargetNodeParent = this.savedTargetNode.parentElement;
+        this.savedTargetNodeIndex = this.getNodeIndexInParent(this.savedTargetNode);
         this.rootElement.appendChild(this.savedTargetNode);
       }
 
@@ -272,11 +274,12 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     if (IsTouch) {
       this.savedTargetNode.style.cssText = null;
       this.savedTargetNode && this.savedTargetNode.parentElement.removeChild(this.savedTargetNode);
-      this.savedTargetNodeParent.appendChild(this.savedTargetNode);
+      this.insertNodeToParentAtIndex(this.savedTargetNodeParent, this.savedTargetNode, this.savedTargetNodeIndex);
       DragDropDOMAdapter.PreventScrolling = false;
     }
     this.savedTargetNode = null;
     this.savedTargetNodeParent = null;
+    this.savedTargetNodeIndex = null;
 
     this.returnUserSelectBack();
   };
@@ -336,4 +339,12 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     }
     this.doStartDrag(event, draggedElement, parentElement, draggedElementNode);
   }
+
+  private getNodeIndexInParent(node: any): number {
+    return [...node.parentElement.childNodes].indexOf(node);
+  }
+
+  private insertNodeToParentAtIndex(parent: HTMLElement, node: HTMLElement, index:number) {
+    parent.insertBefore(node, parent.childNodes[index]);
+  }
 }

tests/dragdrophelpertests.ts

@@ -392,4 +392,33 @@ QUnit.test("ranking selectToRank for ChoicesDND(creator)", function (assert) {
   let ddHelper:any = new DragDropChoices(survey);
   ddHelper.parentElement = survey.getQuestionByName("q1");
   assert.equal(ddHelper["getVisibleChoices"]().length, 4);
+});
+
+QUnit.test("DragDropDOMAdapter: getNodeIndexInParent", function (assert) {
+  const parent = document.createElement("div");
+  const child1 = document.createElement("div");
+  const child2 = document.createElement("div");
+
+  parent.appendChild(child1);
+  parent.appendChild(child2);
+
+  const ddengine: any = null;
+  let domAdapter: any = new DragDropDOMAdapter(ddengine);
+  assert.equal(domAdapter.getNodeIndexInParent(child1), 0);
+  assert.equal(domAdapter.getNodeIndexInParent(child2), 1);
+});
+
+QUnit.test("DragDropDOMAdapter: insertNodeToParentAtIndex", function (assert) {
+  const parent = document.createElement("div");
+  const child1 = document.createElement("div");
+  const child2 = document.createElement("div");
+
+  parent.appendChild(child1);
+
+  const ddengine: any = null;
+  let domAdapter: any = new DragDropDOMAdapter(ddengine);
+  domAdapter.insertNodeToParentAtIndex(parent, child2, 0);
+
+  assert.equal(domAdapter.getNodeIndexInParent(child2), 0);
+  assert.equal(domAdapter.getNodeIndexInParent(child1), 1);
 });