Update missing events on Droppable documentation

Author: bahung1221

index.d.ts

@@ -56,10 +56,14 @@ declare module '@shopify/draggable' {
         ? MirrorMoveEvent
         : eventName extends 'mirror:destroy'
         ? MirrorDestroyEvent
+        : eventName extends 'droppable:start'
+        ? DroppableStartEvent
         : eventName extends 'droppable:dropped'
         ? DroppableDroppedEvent
         : eventName extends 'droppable:returned'
         ? DroppableReturnedEvent
+        : eventName extends 'droppable:stop'
+        ? DroppableStopEvent
         : eventName extends 'sortable:start'
         ? SortableStartEvent
         : eventName extends 'sortable:sort'
@@ -350,8 +354,10 @@ declare module '@shopify/draggable' {
      * Droppable
      */
     export type DroppableEventNames =
+        'droppable:start' |
         'droppable:dropped' |
         'droppable:returned' |
+        'droppable:stop' |
         DraggableEventNames;
 
     export class DroppableEvent extends AbstractEvent {

src/Droppable/README.md

@@ -1,7 +1,7 @@
 ## Droppable
 
 Droppable is built on top of Draggable and allows you to declare draggable and droppable elements via options.
-Droppable fires two events on top of the draggable events: `droppable:dropped` and `droppable:returned`.
+Droppable fires four events on top of the draggable events: `droppable:start`, `droppable:dropped`, `droppable:returned` and `droppable:stop`.
 Droppable elements must begin in an occupied dropzone (see below, [Classes](#classes) and example),
 so they may returned if the drag is canceled or returned.
 
@@ -57,13 +57,17 @@ elements within the `containers`.
 
 Check out [Draggable events](../Draggable#events) for the base events
 
-| Name                                      | Description                                                     | Cancelable | Cancelable action |
-| ----------------------------------------- | --------------------------------------------------------------- | ---------- | ----------------- |
-| [`droppable:dropped`][droppabledropped]   | Gets fired when dropping draggable element into a dropzone      | true       | Prevents drop     |
-| [`droppable:returned`][droppablereturned] | Gets fired when draggable elements returns to original dropzone | true       | Prevents return   |
+| Name                                      | Description                                                               | Cancelable | Cancelable action |
+| ----------------------------------------- | ------------------------------------------------------------------------- | ---------- | ----------------- |
+| [`droppable:start`][droppablestart]       | Gets fired before dropping the draggable element into a dropzone          | true       | Prevents drag     |
+| [`droppable:dropped`][droppabledropped]   | Gets fired when dropping draggable element into a dropzone                | true       | Prevents drop     |
+| [`droppable:returned`][droppablereturned] | Gets fired when draggable elements returns to original dropzone           | true       | Prevents return   |
+| [`droppable:stop`][droppablestop]         | Gets fired before dropping the draggable element into a dropzone element  | false      | -                 |
 
+[droppablestart]: DroppableEvent#droppablestartevent
 [droppabledropped]: DroppableEvent#droppabledroppedevent
 [droppablereturned]: DroppableEvent#droppablereturnedevent
+[droppablestop]: DroppableEvent#droppablestopevent
 
 ### Classes
 

src/Sortable/README.md

@@ -1,7 +1,7 @@
 ## Sortable
 
 Sortable is built on top of Draggable and allows you to reorder elements. It maintains the order internally and fires
-three events on top of the draggable events: `sortable:start`, `sortable:sort`, `sortable:sorted` and `sortable:stop`.
+four events on top of the draggable events: `sortable:start`, `sortable:sort`, `sortable:sorted` and `sortable:stop`.
 
 Make sure to nest draggable elements as immediate children elements to their corresponding containers, this is a requirement for `Sortable`.