fix(drag-drop): item not being restored to its initial DOM position when using custom preview (#12808)

When a `cdkDrag` item is picked up, we save its `nextSibling` so we know where to put it once the user has stopped dragging. This logic gets thrown off when we use a custom preview element and it ends up leaving the element in the wrong place in the DOM. These changes ensure that the element is restored to its old position correctly.

Author: crisbeto

src/cdk/drag-drop/drag.spec.ts

@@ -807,6 +807,25 @@ describe('CdkDrag', () => {
       expect(preview.textContent!.trim()).toContain('Custom preview');
     }));
 
+    it('should revert the element back to its parent after dragging with a custom ' +
+      'preview has stopped', fakeAsync(() => {
+        const fixture = createComponent(DraggableInDropZoneWithCustomPreview);
+        fixture.detectChanges();
+
+        const dragContainer = fixture.componentInstance.dropInstance.element.nativeElement;
+        const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+
+        expect(dragContainer.contains(item)).toBe(true, 'Expected item to be in container.');
+
+        // The coordinates don't matter.
+        dragElementViaMouse(fixture, item, 10, 10);
+        flush();
+        fixture.detectChanges();
+
+        expect(dragContainer.contains(item))
+            .toBe(true, 'Expected item to be returned to container.');
+      }));
+
     it('should position custom previews next to the pointer', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZoneWithCustomPreview);
       fixture.detectChanges();

src/cdk/drag-drop/drag.ts

@@ -262,14 +262,18 @@ export class CdkDrag<T = any> implements OnDestroy {
 
     if (this.dropContainer) {
       const element = this.element.nativeElement;
+
+      // Grab the `nextSibling` before the preview and placeholder
+      // have been created so we don't get the preview by accident.
+      this._nextSibling = element.nextSibling;
+
       const preview = this._preview = this._createPreviewElement();
       const placeholder = this._placeholder = this._createPlaceholderElement();
 
       // We move the element out at the end of the body and we make it hidden, because keeping it in
       // place will throw off the consumer's `:last-child` selectors. We can't remove the element
       // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
       element.style.display = 'none';
-      this._nextSibling = element.nextSibling;
       this._document.body.appendChild(element.parentNode!.replaceChild(placeholder, element));
       this._document.body.appendChild(preview);
       this.dropContainer.start();