Add insertBy option to allow prepending or appending elements

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> {

src/Draggable/Draggable.js

@@ -52,6 +52,7 @@ export const defaultOptions = {
   delay: {},
   distance: 0,
   placedTimeout: 800,
+  insertBy: 'append',
   plugins: [],
   sensors: [],
   exclude: {

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: `[]`

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'));
   }