From fb078227a178a6129e874b4378f5b0e91d05ad9b Mon Sep 17 00:00:00 2001
From: Finnian Anderson <get@finnian.io>
Date: Thu, 18 Nov 2021 14:40:30 +1300
Subject: [PATCH] Add `insertBy` option to allow prepending or appending
 elements

---
 index.d.ts                 |  1 +
 src/Draggable/Draggable.js |  1 +
 src/Draggable/README.md    |  4 ++++
 src/Droppable/Droppable.js | 13 +++++++++++--
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 22458541..7d48689d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -397,6 +397,7 @@ declare module '@shopify/draggable' {
     export interface DroppableOptions extends DraggableOptions {
         dropzone: string | NodeList | HTMLElement[] | (() => NodeList | HTMLElement[]);
         classes?: { [key in DroppableClassNames]: string };
+        insertBy: 'prepend' | 'append';
     }
 
     export class Droppable<T = DroppableEventNames> extends Draggable<T> {
diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js
index 1fd39cad..a94a3a57 100644
--- a/src/Draggable/Draggable.js
+++ b/src/Draggable/Draggable.js
@@ -52,6 +52,7 @@ export const defaultOptions = {
   delay: {},
   distance: 0,
   placedTimeout: 800,
+  insertBy: 'append',
   plugins: [],
   sensors: [],
   exclude: {
diff --git a/src/Draggable/README.md b/src/Draggable/README.md
index 8dc417b5..83e4d645 100644
--- a/src/Draggable/README.md
+++ b/src/Draggable/README.md
@@ -118,6 +118,10 @@ You can set the same delay for all sensors by setting a number, or set an object
 The distance you want the pointer to have moved before drag starts. This can be useful
 for clickable draggable elements, such as links. Default: `0`
 
+**`insertBy {String}`**  
+The method by which you wish to insert the dragged element. Valid values are `prepend`
+or `append`. Default: `append`
+
 **`plugins {Plugin[]}`**  
 Plugins add behaviour to Draggable by hooking into its life cycle, e.g. one of the default
 plugins controls the mirror movement. Default: `[]`
diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js
index 2916b159..fdd6d529 100644
--- a/src/Droppable/Droppable.js
+++ b/src/Droppable/Droppable.js
@@ -237,7 +237,11 @@ export default class Droppable extends Draggable {
       this.lastDropzone.classList.remove(...occupiedClasses);
     }
 
-    dropzone.appendChild(event.source);
+    if (this.options.insertBy === 'prepend') {
+      dropzone.prepend(event.source);
+    } else {
+      dropzone.appendChild(event.source);
+    }
     dropzone.classList.add(...occupiedClasses);
 
     return true;
@@ -260,7 +264,12 @@ export default class Droppable extends Draggable {
       return;
     }
 
-    this.initialDropzone.appendChild(event.source);
+    if (this.options.insertBy === 'prepend') {
+      this.initialDropzone.prepend(event.source);
+    } else {
+      this.initialDropzone.appendChild(event.source);
+    }
+
     this.lastDropzone.classList.remove(...this.getClassNamesFor('droppable:occupied'));
   }