From 3962a096588c6082e876eee462cbe238b3bde990 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sun, 21 Jan 2018 10:53:51 -0500 Subject: [PATCH] Sortable README corrections --- src/Sortable/README.md | 37 ++++++++++++++++++++++------ src/Sortable/SortableEvent/README.md | 2 +- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/Sortable/README.md b/src/Sortable/README.md index 01860c67..46049c03 100644 --- a/src/Sortable/README.md +++ b/src/Sortable/README.md @@ -1,7 +1,9 @@ ## 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:sorted` and `sortable:stop`. +three 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`. ### Import @@ -27,19 +29,27 @@ Check out [Draggables API](../Draggable#api) for the base API ### Options -Check out Draggables options for the base options +Check out [Draggables options](../Draggable#options) for the base options ### Events -| Name | Description | Cancelable | Cancelable action | -| --------------------- | ---------------------------------------------------------- | ----------- | -------------------- | -| `sortable:start` | Gets fired when drag action begins | true | Prevents drag start | -| `sortable:sorted` | Gets fired when the source gets sorted in the DOM | false | - | -| `sortable:stop` | Gets fired when dragging over other draggable | false | - | +Check out [Draggables events](../Draggable#events) for base events + +| Name | Description | Cancelable | Cancelable action | +| ------------------------------------ | ---------------------------------------------------------- | ----------- | -------------------- | +| [`sortable:start`][sortablestart] | Gets fired when drag action begins | true | Prevents drag start | +| [`sortable:sort`][sortablesort] | Gets fired before sorting | true | Prevents sorting | +| [`sortable:sorted`][sortablesorted] | Gets fired when the source gets sorted in the DOM | false | - | +| [`sortable:stop`][sortablestop] | Gets fired when dragging over other draggable | false | - | + +[sortablestart]: SortableEvent#sortablestart +[sortablesort]: SortableEvent#sortablesort +[sortablesorted]: SortableEvent#sortablesorted +[sortablestop]: SortableEvent#sortablestop ### Classes -Check out Draggables class identifiers +Check out [Draggables class identifiers](../Draggable#classes) ### Example @@ -53,6 +63,17 @@ const sortable = new Sortable(document.querySelectorAll('ul'), { }); sortable.on('sortable:start', () => console.log('sortable:start')); +sortable.on('sortable:sort', () => console.log('sortable:sort')); sortable.on('sortable:sorted', () => console.log('sortable:sorted')); sortable.on('sortable:stop', () => console.log('sortable:stop')); ``` + +### Plans + +- Add `copy` option, which will allow draggable elements to be copied when dropped in a different container +- Add `removeOnSpill` option, which will allow draggable elements to be removed from the DOM when dropped outside a container + +### Caveats + +- Needs draggable elements to be immediate children of draggable containers. +- Currently just appends draggable elements in different containers diff --git a/src/Sortable/SortableEvent/README.md b/src/Sortable/SortableEvent/README.md index 5c0e3e79..de92976d 100644 --- a/src/Sortable/SortableEvent/README.md +++ b/src/Sortable/SortableEvent/README.md @@ -36,7 +36,7 @@ Read-only property for the start container of the current draggable source. ## SortableSortEvent -`SortableSortedEvent` gets triggered by `Sortable` before sorting with another draggable. +`SortableSortEvent` gets triggered by `Sortable` before sorting with another draggable. | | | | --------------------- | ---------------------------------------------------------- |