archive-gh-me/draggable
1
0
Fork 0
mirror of https://github.com/Shopify/draggable.git synced 2025-12-08 20:15:56 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #480 from zjffun/docs/add-notes

Browse Source 
v1.0.0-beta.13
This commit is contained in:
Max Hoffmann 2021-05-17 11:46:29 -04:00 committed by GitHub
commit ec31c54557
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 69 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
CHANGELOG.md
View File

@ -1,5 +1,18 @@
# Changelog
## v1.0.0-beta.13 - 2021-05-17
### Added
- Add `mirror:moved` event
- Cancel Dragging on ESC key up
### Changed
- Fixes add missing exports `DelayOptions` and `DelayOptions`
- Fixes return early when the target isn't in handle or draggable elements sensor
- Fixes the argument type of the `trigger` method
## v1.0.0-beta.12 - 2020-09-29
### Added
@ -10,8 +23,8 @@
### Changed
- Fixes incorrect `oldIndex` value when working with **nested sortable**
- Fixes wrong same container checking bug when working with **nested sortable**
- Fixes bug `drag:start` event was triggered during the delay time
- Fixes wrong same container checking bug when working with **nested sortable**
- Fixes bug `drag:start` event was triggered during the delay time
- Fixes missing `overContainer` property in **DragOutEvent**
## v1.0.0-beta.11 - 2020-07-14

20
README.md
View File

@ -41,6 +41,8 @@ interface, for more information read the documentation below.
## Install
**NOTE**: When installing with npm or yarn, `@shopify/draggable@1.0.0-beta.8` will be installed by default. If you want to install the latest version, please install `@shopify/draggable@1.0.0-beta.13` or `@shopify/draggable@next`.
You can install the library via npm.
```
@ -57,19 +59,19 @@ or via CDN
```html
<!-- Entire bundle -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<!-- legacy bundle for older browsers (IE11) -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.legacy.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.legacy.js"></script>
<!-- Draggable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.js"></script>
<!-- Sortable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/sortable.js"></script>
<!-- Droppable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/droppable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/droppable.js"></script>
<!-- Swappable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/swappable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/swappable.js"></script>
<!-- Plugins only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/plugins.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins.js"></script>
```
## Browser Compatibility
@ -120,7 +122,7 @@ You can find the documentation for each module within their respective directori
- [ResizeMirror](src/Plugins/ResizeMirror)
- [Snappable](src/Plugins/Snappable)
- [SwapAnimation](src/Plugins/SwapAnimation)
- [SortAnimation](src/Plugins/SortAnimation)
- [SortAnimation](src/Plugins/SortAnimation) (Added in: v1.0.0-beta.10)
- [Sortable](src/Sortable)
- [SortableEvent](src/Sortable/SortableEvent)
- [Swappable](src/Swappable)
@ -128,6 +130,8 @@ You can find the documentation for each module within their respective directori
## TypeScript
(Added in: v1.0.0-beta.9)
Draggable includes [TypeScript](http://typescriptlang.org) definitions.
[Documentation](doc/typescript.md)

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@shopify/draggable",
"version": "1.0.0-beta.12",
"version": "1.0.0-beta.13",
"private": false,
"license": "MIT",
"description": "The JavaScript Drag & Drop library your grandparents warned you about.",

2
src/Draggable/DragEvent/DragEvent.js
View File

@ -227,6 +227,8 @@ export class DragStopEvent extends DragEvent {
}
/**
* (Added in: v1.0.0-beta.12)
*
* Drag stopped event
* @class DragStoppedEvent
* @module DragStoppedEvent

2
src/Draggable/DragEvent/README.md
View File

@ -166,6 +166,8 @@ Read-only property for pressure applied on a draggable element. Value ranges fro
## DragStoppedEvent
(Added in: v1.0.0-beta.12)
`DragStoppedEvent` gets triggered after `DragStopEvent`. This event fires after `drag:stop` listeners have finished running,
the source element removed from the document and draggable classes are removed.

3
src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.js
View File

@ -162,7 +162,8 @@ export class MirrorMoveEvent extends MirrorEvent {
}
/**
* NOTE: Will be added in the next version (v1.0.0-beta.13)
* (Added in: v1.0.0-beta.13)
*
* Mirror moved event
* @class MirrorMovedEvent
* @module MirrorMovedEvent

2
src/Draggable/Plugins/Mirror/MirrorEvent/README.md
View File

@ -104,7 +104,7 @@ Read-only property for whether or not the mirror's threshold has been exceeded i
## MirrorMovedEvent
**NOTE**: Will be added in the next version (v1.0.0-beta.13)
(Added in: v1.0.0-beta.13)
`MirrorMovedEvent` gets triggered when the **mirror:move** event was done.

6
src/Draggable/Plugins/Mirror/README.md
View File

@ -32,10 +32,12 @@ this is not where the source will be placed, only the temporary mirror element,
that follows your cursor as you drag. You can specify a css selector, a HTMLElement or a function
that returns a HTMLElement. Default is the source parent element.
**`thresholdX {Number|null}`**
**`thresholdX {Number|null}`**
(Added in: v1.0.0-beta.9)
Defining this sets a threshold that must be exceeded by the mouse for the mirror to move on the x axis. Default: `null`
**`thresholdY {Number|null}`**
**`thresholdY {Number|null}`**
(Added in: v1.0.0-beta.9)
Defining this sets a threshold that must be exceeded by the mouse for the mirror to move on the y axis. Default: `null`
### Events

10
src/Draggable/README.md
View File

@ -15,7 +15,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
- Browser (All Bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
draggable: 'li'
@ -25,7 +25,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.js"></script>
<script>
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
draggable: 'li'
@ -99,6 +99,7 @@ Specify a css selector for a handle element if you don't want to allow drag acti
on the entire element. Default: `null`
**`delay {Number|Object}`**
(Support set object in: v1.0.0-beta.12)
If you want to delay a drag start you can specify delay in milliseconds. This can be useful
for draggable elements within scrollable containers. To allow touch scrolling, we set 100ms delay for TouchSensor by default. Default:
@ -113,6 +114,7 @@ for draggable elements within scrollable containers. To allow touch scrolling, w
You can set the same delay for all sensors by setting a number, or set an object to set the delay for each sensor separately.
**`distance {Number}`**
(Added in: v1.0.0-beta.9)
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`
@ -125,12 +127,14 @@ Sensors dictate how drag operations get triggered, by listening to native browse
By default draggable includes the `MouseSensor` & `TouchSensor`. Default: `[]`
**`classes {{String: String|String[]}}`**
(Support multiple classes in: v1.0.0-beta.12)
Draggable adds classes to elements to indicate state. These classes can be used to add styling
on elements in certain states. Accept String or Array of strings.
**NOTE**: When specifying multiple classes to an indicate state, the first class MUST be unique for that state to avoid duplicate classes for other states. IE doesn't support add or remove multiple classes. If you want to use multiple classes in IE, you need to add a classList polyfill to your project first.
**`exclude {plugins: Plugin[], sensors: Sensor[]}`**
(Added in: v1.0.0-beta.11)
Allow excluding default plugins and default sensors. Use with caution as it may create strange behavior.
### Events
@ -146,7 +150,7 @@ Allow excluding default plugins and default sensors. Use with caution as it may
| [`drag:out`][dragout] | Gets fired when dragging out of other draggable | false | - |
| [`drag:out:container`][dragoutcontainer] | Gets fired when dragging out of other draggable container | false | - |
| [`drag:stop`][dragstop] | Gets fired when draggable has been released | false | - |
| [`drag:stopped`][dragstopped] | Gets fired when draggable finished | false | - |
| [`drag:stopped`][dragstopped] | Gets fired when draggable finished (Added in: v1.0.0-beta.12) | false | - |
| [`drag:pressure`][dragpressure] | Gets fired when using force touch on draggable element | false | - |
[draggableinit]: DraggableEvent#draggableinitializedevent

4
src/Droppable/README.md
View File

@ -21,7 +21,7 @@ const droppable = new Droppable(document.querySelectorAll('.container'), {
- Browser (All Bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const droppable = new Draggable.Droppable(document.querySelectorAll('.container'), {
draggable: '.item',
@ -32,7 +32,7 @@ const droppable = new Droppable(document.querySelectorAll('.container'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/droppable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/droppable.js"></script>
<script>
const droppable = new Droppable.default(document.querySelectorAll('.container'), {
draggable: '.item',

6
src/Plugins/Collidable/README.md
View File

@ -23,7 +23,7 @@ const draggable = new Draggable(document.querySelectorAll("ul"), {
- Browser (All bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
draggable: 'li',
@ -35,8 +35,8 @@ const draggable = new Draggable(document.querySelectorAll("ul"), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/plugins/collidable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins/collidable.js"></script>
<script>
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
draggable: 'li',

6
src/Plugins/ResizeMirror/README.md
View File

@ -28,7 +28,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
- Browser (All bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
draggable: 'li',
@ -39,8 +39,8 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/plugins/resize-mirror.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins/resize-mirror.js"></script>
<script>
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
draggable: 'li',

6
src/Plugins/Snappable/README.md
View File

@ -23,7 +23,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
- Browser (All bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
draggable: 'li',
@ -34,8 +34,8 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/plugins/snappable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins/snappable.js"></script>
<script>
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
draggable: 'li',

6
src/Plugins/SortAnimation/README.md
View File

@ -31,7 +31,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
- Browser (All plugins bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
draggable: 'li',
@ -46,8 +46,8 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/plugins/sort-animation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins/sort-animation.js"></script>
<script>
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
draggable: 'li',

2
src/Plugins/SortAnimation/SortAnimation.js
View File

@ -16,6 +16,8 @@ export const defaultOptions = {
};
/**
* (Added in: v1.0.0-beta.10)
*
* SortAnimation plugin adds sort animation for sortable
* @class SortAnimation
* @module SortAnimation

6
src/Plugins/SwapAnimation/README.md
View File

@ -29,7 +29,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
- Browser (All plugins bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
draggable: 'li',
@ -45,8 +45,8 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/plugins/swap-animation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins/swap-animation.js"></script>
<script>
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
draggable: 'li',

4
src/Sortable/README.md
View File

@ -20,7 +20,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
- Browser (All Bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
draggable: 'li'
@ -30,7 +30,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/sortable.js"></script>
<script>
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
draggable: 'li'

4
src/Swappable/README.md
View File

@ -18,7 +18,7 @@ const swappable = new Swappable(document.querySelectorAll('ul'), {
- Browser (All Bundle):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<script>
const swappable = new Draggable.Swappable(document.querySelectorAll('ul'), {
draggable: 'li'
@ -28,7 +28,7 @@ const swappable = new Swappable(document.querySelectorAll('ul'), {
- Browser (Standalone):
```html
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/swappable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/swappable.js"></script>
<script>
const swappable = new Swappable.default(document.querySelectorAll('ul'), {
draggable: 'li'