mirror of
https://github.com/Shopify/draggable.git
synced 2025-12-08 20:15:56 +00:00
Convert build to rollup
This commit is contained in:
Max Hoffmann
parent
16c31729c9
commit
b81e8f678f
5
.changeset/smart-cycles-raise.md
Normal file
5
.changeset/smart-cycles-raise.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
'@shopify/draggable': minor
|
||||
---
|
||||
|
||||
Converted build from webpack to rollout. Import paths have changed
|
||||
8
.github/ISSUE_TEMPLATE.md
vendored
8
.github/ISSUE_TEMPLATE.md
vendored
@ -16,7 +16,7 @@ _Please remember that with sample code it's easier to reproduce the bug and it's
|
||||
|
||||
### 4. Please tell us about your environment:
|
||||
|
||||
* **Library version:** [1.0.0-beta.X | v1 stable | etc...]
|
||||
* **Browsers:** [all | Chrome vX | Firefox vX | Safari vX | Edge vX | iOS vX | Android vX | etc...]
|
||||
* **Tech stack:** [all | TypeScript vX | ES6/7 | ES5 | React | etc...]
|
||||
* **Other information:** [Detailed explanation | Stacktraces | Related issues | Suggestions how to fix | Links for us to have context | etc...]
|
||||
- **Library version:** [1.X.X | v1 stable | etc...]
|
||||
- **Browsers:** [all | Chrome vX | Firefox vX | Safari vX | Edge vX | iOS vX | Android vX | etc...]
|
||||
- **Tech stack:** [all | TypeScript vX | ES6/7 | ES5 | React | etc...]
|
||||
- **Other information:** [Detailed explanation | Stacktraces | Related issues | Suggestions how to fix | Links for us to have context | etc...]
|
||||
|
||||
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -1,4 +1,4 @@
|
||||
<!-- Thank you for submitting a pull request! Please make sure you have read the [contribution guidelines](https://github.com/Shopify/draggable/blob/master/CONTRIBUTING.md) before proceeding. -->
|
||||
<!-- Thank you for submitting a pull request! Please make sure you have read the [contribution guidelines](https://github.com/Shopify/draggable/blob/main/CONTRIBUTING.md) before proceeding. -->
|
||||
|
||||
### This PR implements or fixes...
|
||||
|
||||
|
||||
4
.github/workflows/ci.yml
vendored
4
.github/workflows/ci.yml
vendored
@ -28,8 +28,8 @@ jobs:
|
||||
- name: Library typecheck
|
||||
run: yarn type-check
|
||||
|
||||
- name: Scripts typecheck
|
||||
run: yarn type-check:scripts
|
||||
- name: Build
|
||||
run: yarn build
|
||||
|
||||
- name: Test
|
||||
run: yarn test
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -17,8 +17,8 @@ example.html
|
||||
|
||||
coverage/
|
||||
docs/
|
||||
lib/
|
||||
coverage/
|
||||
build/
|
||||
.rollup.cache/
|
||||
|
||||
# 'cause we are all yarny and stuff
|
||||
package-lock.json
|
||||
|
||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -2,12 +2,11 @@
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/node_modules": true,
|
||||
"lib": true
|
||||
"**/node_modules": true
|
||||
},
|
||||
"search.exclude": {
|
||||
"**/node_modules": true,
|
||||
"lib": true
|
||||
"build": true
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
@ -14,7 +14,7 @@ appreciated and encouraged.
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
This project and everyone participating in it is governed by the [Code of Conduct document](https://github.com/Shopify/draggable/blob/master/CODE_OF_CONDUCT.md).
|
||||
This project and everyone participating in it is governed by the [Code of Conduct document](https://github.com/Shopify/draggable/blob/main/CODE_OF_CONDUCT.md).
|
||||
By participating, you are expected to uphold this code. Please report unacceptable behaviour to max.hoffmann@shopify.com or curtis.dulmage@shopify.com.
|
||||
|
||||
## How to contribute
|
||||
@ -29,11 +29,11 @@ please open a new issue with labels: `bug`, `documentation`, `feature-request` o
|
||||
Pull requests are more than welcome! Just make sure that to include a description of the problem and how you are attempting to fix the issue, or
|
||||
simply follow the Pull Request description template.
|
||||
|
||||
We also require Pull Requests to sync with master via rebase (not merge). So when you need to sync up your branch with master use: `git pull --rebase origin master`,
|
||||
We also require Pull Requests to sync with main via rebase (not merge). So when you need to sync up your branch with main use: `git pull --rebase origin main`,
|
||||
or if you need to sync up with another branch `git pull --rebase origin some-other-branch-name`. Doing so will remove of an extra merge commit in the git history.
|
||||
This will also require a force push to the branch, e.g. `git push -u origin +some-branch`. The `+` in the last command indicates that you are force pushing changes.
|
||||
|
||||
Additionally we require commits to be atomic and squashed where needed. This will keep the git history clean on master. To squash commits use the `git rebase -i @~2`
|
||||
Additionally we require commits to be atomic and squashed where needed. This will keep the git history clean on main. To squash commits use the `git rebase -i @~2`
|
||||
command to do an interactive rebase. This will allow you to merge multiple commits into one. To read up more on this please visit: [Git Tools Rewriting History](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History)
|
||||
|
||||
### JS Docblocks
|
||||
|
||||
83
README.md
83
README.md
@ -1,6 +1,4 @@
|
||||
[](https://badge.fury.io/js/%40shopify%2Fdraggable)
|
||||
[](https://codecov.io/gh/Shopify/draggable)
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://www.npmjs.com/package/@shopify/draggable) [](https://github.com/Shopify/draggable/actions?query=branch%3Amain) [](https://github.com/Shopify/draggable/blob/main/CONTRIBUTING.md) 
|
||||
|
||||
<a href="https://shopify.github.io/draggable" title="Visit Draggable website">
|
||||
<img src="https://user-images.githubusercontent.com/643944/35602291-99e2c56e-0605-11e8-847f-95f1f6be1610.jpg" alt="">
|
||||
@ -40,17 +38,15 @@ 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.
|
||||
|
||||
```
|
||||
```bash
|
||||
npm install @shopify/draggable --save
|
||||
```
|
||||
|
||||
or via yarn:
|
||||
|
||||
```
|
||||
```bash
|
||||
yarn add @shopify/draggable
|
||||
```
|
||||
|
||||
@ -58,41 +54,48 @@ or via CDN
|
||||
|
||||
```html
|
||||
<!-- Entire bundle -->
|
||||
<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.13/lib/draggable.bundle.legacy.js"></script>
|
||||
<script type="module">
|
||||
import {
|
||||
Draggable,
|
||||
Sortable,
|
||||
Droppable,
|
||||
Swappable,
|
||||
} from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.js';
|
||||
</script>
|
||||
<!-- Draggable only -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.js"></script>
|
||||
<script type="module">
|
||||
import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
|
||||
</script>
|
||||
<!-- Sortable only -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/sortable.js"></script>
|
||||
<script type="module">
|
||||
import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
|
||||
</script>
|
||||
<!-- Droppable only -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/droppable.js"></script>
|
||||
<script type="module">
|
||||
import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.js';
|
||||
</script>
|
||||
<!-- Swappable only -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/swappable.js"></script>
|
||||
<script type="module">
|
||||
import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.js';
|
||||
</script>
|
||||
<!-- Plugins only -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/plugins.js"></script>
|
||||
<script type="module">
|
||||
import * as Plugins from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/index.js';
|
||||
</script>
|
||||
<!-- UMD browser -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
console.log(window.Draggable);
|
||||
</script>
|
||||
```
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
|  |  |  |  |  |  |
|
||||
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||||
| Latest ✔ | Latest ✔ | 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
||||
Check the "browserlist" property in [package.json](https://github.com/Shopify/draggable/blob/main/package.json#L88) for more info
|
||||
|
||||
## Bundle sizes
|
||||
|
||||
| Package name | ES6 bundle sizes | ES5 bundle sizes |
|
||||
| -------------------------- | ---------------- | ---------------- |
|
||||
| draggable.bundle.js | ~11kb | ~19.2kb |
|
||||
| draggable.bundle.legacy.js | ~19.2kb | ~25.63kb |
|
||||
| draggable.js | ~8.06kb | ~15.36kb |
|
||||
| sortable.js | ~8.93kb | ~16.51kb |
|
||||
| swappable.js | ~8.56kb | ~16.14kb |
|
||||
| droppable.js | ~8.8kb | ~16.55kb |
|
||||
| plugins.js | ~2.37kb | ~8.76kb |
|
||||
| plugins/collidable.js | ~1.45kb | ~7.81kb |
|
||||
| plugins/snappable.js | ~1.19kb | ~6.94kb |
|
||||
| plugins/swap-animation.js | ~1kb | ~6.65kb |
|
||||
|  |  |  |  |  |
|
||||
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||||
| Last 3 versions ✔ | Last 3 versions ✔ | Last 3 versions ✔ | Last 3 versions ✔ | Last 3 versions ✔ |
|
||||
|
||||
## Documentation
|
||||
|
||||
@ -121,15 +124,13 @@ 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) (Added in: v1.0.0-beta.10)
|
||||
- [SortAnimation](src/Plugins/SortAnimation)
|
||||
- [Sortable](src/Sortable)
|
||||
- [SortableEvent](src/Sortable/SortableEvent)
|
||||
- [Swappable](src/Swappable)
|
||||
- [SwappableEvent](src/Swappable/SwappableEvent)
|
||||
|
||||
## TypeScript
|
||||
|
||||
(Added in: v1.0.0-beta.9)
|
||||
### TypeScript
|
||||
|
||||
Draggable includes [TypeScript](http://typescriptlang.org) definitions.
|
||||
|
||||
@ -139,7 +140,7 @@ Draggable includes [TypeScript](http://typescriptlang.org) definitions.
|
||||
|
||||
To run the `examples` project locally, simply run the following from the `draggable` root:
|
||||
|
||||
```
|
||||
```bash
|
||||
yarn && yarn start
|
||||
```
|
||||
|
||||
@ -150,11 +151,7 @@ changes from both `src/` and `examples/src` and reloads the browser.
|
||||
|
||||
Contributions are more than welcome, the code base is still new and needs more love.
|
||||
|
||||
For more information, please checkout the [contributing document](https://github.com/Shopify/draggable/blob/master/CONTRIBUTING.md).
|
||||
|
||||
## Roadmap
|
||||
|
||||
We are currently working on `v1.0.0-beta.12`. Check out the [project board](https://github.com/Shopify/draggable/projects/3) to see tasks and follow progress on the release. Any Pull Requests should be pointed against the feature branch `v1.0.0-beta.12`.
|
||||
For more information, please checkout the [contributing document](https://github.com/Shopify/draggable/blob/main/CONTRIBUTING.md).
|
||||
|
||||
## Related resources
|
||||
|
||||
@ -163,4 +160,4 @@ We are currently working on `v1.0.0-beta.12`. Check out the [project board](http
|
||||
|
||||
## Copyright
|
||||
|
||||
Copyright (c) 2018 Shopify. See LICENSE.md for further details.
|
||||
Copyright (c) 2018-present Shopify. See LICENSE.md for further details.
|
||||
|
||||
47
babel.config.js
Normal file
47
babel.config.js
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* @type {import('@babel/core').TransformOptions}
|
||||
*/
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
|
||||
return {
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{useBuiltIns: 'entry', corejs: '3.0', bugfixes: true},
|
||||
],
|
||||
['@babel/preset-typescript'],
|
||||
],
|
||||
assumptions: {
|
||||
setPublicClassFields: true,
|
||||
privateFieldsAsProperties: true,
|
||||
// nothing accesses `document.all`:
|
||||
noDocumentAll: true,
|
||||
// nothing relies on class constructors invoked without `new` throwing:
|
||||
noClassCalls: true,
|
||||
// nothing should be relying on tagged template strings being frozen:
|
||||
mutableTemplateObject: true,
|
||||
// nothing is relying on Function.prototype.length:
|
||||
ignoreFunctionLength: true,
|
||||
// nothing is relying on mutable re-exported bindings:
|
||||
constantReexports: true,
|
||||
// don't bother marking Module records non-enumerable:
|
||||
enumerableModuleMeta: true,
|
||||
// nothing uses [[Symbol.toPrimitive]]:
|
||||
// (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)
|
||||
ignoreToPrimitiveHint: true,
|
||||
// nothing relies on spread copying Symbol keys: ({...{ [Symbol()]: 1 }})
|
||||
objectRestNoSymbols: true,
|
||||
// nothing relies on `new (() => {})` throwing:
|
||||
noNewArrows: true,
|
||||
// transpile object spread to assignment instead of defineProperty():
|
||||
setSpreadProperties: true,
|
||||
// nothing should be using custom iterator protocol:
|
||||
skipForOfIteratorClosing: true,
|
||||
// nothing inherits from a constructor function with explicit return value:
|
||||
superIsCallableConstructor: true,
|
||||
// nothing relies on CJS-transpiled namespace imports having all properties prior to module execution completing:
|
||||
noIncompleteNsImportDetection: true,
|
||||
},
|
||||
};
|
||||
};
|
||||
9
config/typescript/rollup-plugin-includepaths.d.ts
vendored
Normal file
9
config/typescript/rollup-plugin-includepaths.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
declare module 'rollup-plugin-includepaths' {
|
||||
interface Options {
|
||||
include: {[key: string]: string};
|
||||
paths: string[];
|
||||
extensions: string[];
|
||||
}
|
||||
export = includePaths;
|
||||
function includePaths(object: Options);
|
||||
}
|
||||
@ -6,6 +6,6 @@
|
||||
<header class="PageHeader">
|
||||
<h1 class="Heading Heading--size1">{{ ViewAttr.parent }}</h1>
|
||||
<h2 class="Subheading">{{ ViewAttr.subheading }}</h2>
|
||||
<a href="https://github.com/Shopify/draggable/tree/master/examples/src/content/{{ contentPath }}" class="Link Link--typeUnderlined" title="See this code example">View code on GitHub</a>
|
||||
<a href="https://github.com/Shopify/draggable/tree/main/examples/src/content/{{ contentPath }}" class="Link Link--typeUnderlined" title="See this code example">View code on GitHub</a>
|
||||
</header>
|
||||
{% endmacro %}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<footer class="SidebarFooter">
|
||||
<p class="LegalText"><a href="https://shopify.github.io/draggable/" class="Link Link--typeDark" title="Visit Draggable JS">draggable.js</a> was developed by <a href="https://github.com/tsov" class="Link Link--noWrap" title="Github: tsov">Max Hoffmann</a> and <a href="https://github.com/beefchimi" class="Link Link--noWrap" title="Github: beefchimi">Curtis Dulmage</a>.</p>
|
||||
|
||||
<p class="LegalText">Draggable is released under the <a href="https://github.com/Shopify/shopify.github.com/blob/master/LICENSE.md" class="Link Link--noWrap" title="View MIT License" target="_blank" rel="noopener">MIT license</a>. You are free to use the code from this library for both personal and commercial use.</p>
|
||||
<p class="LegalText">Draggable is released under the <a href="https://github.com/Shopify/shopify.github.com/blob/main/LICENSE.md" class="Link Link--noWrap" title="View MIT License" target="_blank" rel="noopener">MIT license</a>. You are free to use the code from this library for both personal and commercial use.</p>
|
||||
|
||||
<p class="preload-cursors"><b>Special thanks</b> <u>to all of our</u> <a href="https://github.com/Shopify/draggable/graphs/contributors" title="We love our contributors!">amazing contributors</a>.</p>
|
||||
</footer>
|
||||
|
||||
49
package.json
49
package.json
@ -22,25 +22,26 @@
|
||||
"drag-and-drop",
|
||||
"es6"
|
||||
],
|
||||
"main": "./lib/draggable.bundle.js",
|
||||
"main": "build/cjs/index.js",
|
||||
"module": "build/esm/index.js",
|
||||
"esnext": "build/esnext/index.esnext",
|
||||
"umd": "build/umd/index.js",
|
||||
"types": "./index.d.ts",
|
||||
"scripts": {
|
||||
"start": "concurrently \"yarn watch\" \"cd examples && yarn && yarn start\"",
|
||||
"build": "yarn build:production",
|
||||
"watch": "ts-node --project='./scripts/tsconfig.json' ./scripts/watch.ts",
|
||||
"watch": "yarn build:development --watch",
|
||||
"release": "yarn run build:production && changeset publish",
|
||||
"lint": "eslint ./src ./scripts ./test --max-warnings 0",
|
||||
"type-check": "tsc --noEmit",
|
||||
"type-check:scripts": "tsc --noEmit --project scripts",
|
||||
"lint": "eslint ./src ./test --max-warnings 0",
|
||||
"type-check": "tsc -b",
|
||||
"esdoc": "esdoc -c esdoc.json",
|
||||
"test": "jest",
|
||||
"test-ci": "jest --coverage && codecov",
|
||||
"build:development": "ts-node --project='./scripts/tsconfig.json' ./scripts/build.ts",
|
||||
"build:production": "ts-node --project='./scripts/tsconfig.json' ./scripts/build.ts --production",
|
||||
"verify": "yarn lint && yarn type-check && yarn type-check:scripts && yarn build && yarn test"
|
||||
"build:development": "yarn rollup --config rollup.development.config.ts --configPlugin @rollup/plugin-typescript",
|
||||
"build:production": "tsc && yarn rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript && yarn uglifyjs --compress --mangle -- build/umd/index.js -o build/umd/index.min.js",
|
||||
"verify": "yarn lint && yarn type-check && yarn build && yarn test"
|
||||
},
|
||||
"files": [
|
||||
"lib/**/*.js",
|
||||
"build/**/*",
|
||||
"index.d.ts"
|
||||
],
|
||||
"devDependencies": {
|
||||
@ -48,20 +49,21 @@
|
||||
"@changesets/changelog-github": "^0.4.8",
|
||||
"@changesets/cli": "^2.26.2",
|
||||
"@microsoft/tsdoc": "^0.14.2",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@rollup/plugin-commonjs": "^25.0.4",
|
||||
"@rollup/plugin-node-resolve": "^15.2.1",
|
||||
"@rollup/plugin-typescript": "^11.1.4",
|
||||
"@shopify/babel-preset": "^25.0.0",
|
||||
"@shopify/eslint-plugin": "^43.0.0",
|
||||
"@shopify/prettier-config": "^1.1.2",
|
||||
"@shopify/typescript-configs": "^5.1.0",
|
||||
"@types/jest": "^29.5.5",
|
||||
"@types/node": "^20.6.3",
|
||||
"@types/webpack": "^5.28.2",
|
||||
"@types/webpack-bundle-analyzer": "^4.6.0",
|
||||
"babel-jest": "^29.7.0",
|
||||
"babel-loader": "^9.1.3",
|
||||
"babel-preset-shopify": "^21.0.0",
|
||||
"codecov": "^3.0.2",
|
||||
"concurrently": "^3.5.1",
|
||||
"core-js": "^3.32.2",
|
||||
"esdoc": "^1.1.0",
|
||||
"esdoc-ecmascript-proposal-plugin": "^1.0.0",
|
||||
"esdoc-standard-plugin": "^1.0.0",
|
||||
@ -70,17 +72,26 @@
|
||||
"jest": "^29.7.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"prettier": "^3.0.3",
|
||||
"rollup": "^3.29.3",
|
||||
"rollup-plugin-includepaths": "^0.2.4",
|
||||
"rollup-plugin-node-externals": "^6.1.1",
|
||||
"timers": "^0.1.1",
|
||||
"ts-jest": "^29.1.1",
|
||||
"ts-loader": "^9.4.4",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.2.2",
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-bundle-analyzer": "^4.9.1",
|
||||
"webpack-cli": "^5.1.4"
|
||||
"uglify-js": "^3.17.4"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"@shopify:registry": "https://registry.npmjs.org"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"last 3 chrome versions",
|
||||
"last 3 firefox versions",
|
||||
"last 3 opera versions",
|
||||
"last 3 edge versions",
|
||||
"last 3 safari versions",
|
||||
"last 3 chromeandroid versions",
|
||||
"last 1 firefoxandroid versions",
|
||||
"ios >= 13.4"
|
||||
]
|
||||
}
|
||||
|
||||
85
rollup.config.ts
Normal file
85
rollup.config.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import {readFileSync} from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
import {RollupOptions} from 'rollup';
|
||||
import {babel, RollupBabelInputPluginOptions} from '@rollup/plugin-babel';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import {nodeResolve} from '@rollup/plugin-node-resolve';
|
||||
import includePaths from 'rollup-plugin-includepaths';
|
||||
|
||||
const packageJSON = readFileSync(
|
||||
new URL('./package.json', import.meta.url).pathname,
|
||||
) as unknown;
|
||||
|
||||
const pkg = JSON.parse(packageJSON as string);
|
||||
const extensions = ['.js', '.ts'];
|
||||
|
||||
export function generateConfig({
|
||||
output,
|
||||
targets,
|
||||
}: {
|
||||
output: RollupOptions['output'];
|
||||
targets: RollupBabelInputPluginOptions['targets'];
|
||||
}): RollupOptions {
|
||||
return {
|
||||
input: './src/index',
|
||||
plugins: [
|
||||
includePaths({
|
||||
include: {
|
||||
shared: 'src/shared',
|
||||
},
|
||||
paths: ['src/'],
|
||||
extensions: ['.js', '.ts'],
|
||||
}),
|
||||
nodeResolve({extensions}),
|
||||
commonjs(),
|
||||
babel({
|
||||
extensions,
|
||||
exclude: 'node_modules/**',
|
||||
babelHelpers: 'bundled',
|
||||
envName: 'production',
|
||||
targets,
|
||||
}),
|
||||
],
|
||||
output,
|
||||
};
|
||||
}
|
||||
|
||||
const config = [
|
||||
generateConfig({
|
||||
targets: [...pkg.browserslist],
|
||||
output: [
|
||||
{
|
||||
format: 'cjs',
|
||||
dir: path.dirname(pkg.main),
|
||||
preserveModules: true,
|
||||
entryFileNames: '[name].js',
|
||||
exports: 'named',
|
||||
},
|
||||
{
|
||||
format: 'esm',
|
||||
dir: path.dirname(pkg.module),
|
||||
preserveModules: true,
|
||||
entryFileNames: '[name].js',
|
||||
},
|
||||
{
|
||||
format: 'umd',
|
||||
dir: path.dirname(pkg.umd),
|
||||
name: 'Draggable',
|
||||
},
|
||||
],
|
||||
}),
|
||||
generateConfig({
|
||||
targets: 'last 1 chrome versions',
|
||||
output: [
|
||||
{
|
||||
format: 'esm',
|
||||
dir: path.dirname(pkg.esnext),
|
||||
preserveModules: true,
|
||||
entryFileNames: '[name].esnext',
|
||||
},
|
||||
],
|
||||
}),
|
||||
];
|
||||
|
||||
export default config;
|
||||
14
rollup.development.config.ts
Normal file
14
rollup.development.config.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import {generateConfig} from './rollup.config';
|
||||
|
||||
const config = generateConfig({
|
||||
targets: 'last 1 chrome versions',
|
||||
output: [
|
||||
{
|
||||
format: 'umd',
|
||||
dir: './examples/packages/@shopify/draggable',
|
||||
name: 'Draggable',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default config;
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
import webpack from 'webpack';
|
||||
|
||||
import {isProd, useAnalyser} from './build/config';
|
||||
import {createConfig as createDevelopmentConfig} from './build/development';
|
||||
import {createConfig as createProductionConfig} from './build/production';
|
||||
import {runner} from './build/runner';
|
||||
|
||||
let compiler;
|
||||
|
||||
if (isProd) {
|
||||
compiler = webpack(createProductionConfig({analyser: useAnalyser}));
|
||||
} else {
|
||||
compiler = webpack(createDevelopmentConfig({analyser: useAnalyser}));
|
||||
}
|
||||
|
||||
compiler.run(runner);
|
||||
@ -1,85 +0,0 @@
|
||||
export interface Bundle {
|
||||
name: string;
|
||||
filename: string;
|
||||
source: string;
|
||||
path?: string;
|
||||
}
|
||||
|
||||
export const bundles: Bundle[] = [
|
||||
{
|
||||
name: 'Draggable',
|
||||
filename: 'draggable.bundle',
|
||||
source: 'index',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Draggable',
|
||||
filename: 'draggable.bundle.legacy',
|
||||
source: 'index.legacy',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Draggable',
|
||||
filename: 'draggable',
|
||||
source: 'Draggable/index',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Sortable',
|
||||
filename: 'sortable',
|
||||
source: 'Sortable/index',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Swappable',
|
||||
filename: 'swappable',
|
||||
source: 'Swappable/index',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Droppable',
|
||||
filename: 'droppable',
|
||||
source: 'Droppable/index',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Plugins',
|
||||
filename: 'plugins',
|
||||
source: 'Plugins/index',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Collidable',
|
||||
filename: 'collidable',
|
||||
source: 'Plugins/Collidable/index',
|
||||
path: 'plugins/',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'ResizeMirror',
|
||||
filename: 'resize-mirror',
|
||||
source: 'Plugins/ResizeMirror/index',
|
||||
path: 'plugins/',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Snappable',
|
||||
filename: 'snappable',
|
||||
source: 'Plugins/Snappable/index',
|
||||
path: 'plugins/',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'SwapAnimation',
|
||||
filename: 'swap-animation',
|
||||
source: 'Plugins/SwapAnimation/index',
|
||||
path: 'plugins/',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'SortAnimation',
|
||||
filename: 'sort-animation',
|
||||
source: 'Plugins/SortAnimation/index',
|
||||
path: 'plugins/',
|
||||
},
|
||||
];
|
||||
@ -1,9 +0,0 @@
|
||||
const args = process.argv.filter((_, index) => index >= 2);
|
||||
|
||||
export const useAnalyser = args.some((value) => value === '--analyser');
|
||||
export const isProd = args.find((value) => value === '--production');
|
||||
export const rootPath = `${__dirname}/../../`;
|
||||
export const targetPath = isProd
|
||||
? `${rootPath}lib/`
|
||||
: `${rootPath}examples/packages/@shopify/draggable`;
|
||||
export const resolveModules = ['node_modules', 'src/'];
|
||||
@ -1,56 +0,0 @@
|
||||
import type {Configuration} from 'webpack';
|
||||
import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
|
||||
|
||||
import {targetPath, resolveModules} from './config';
|
||||
|
||||
interface Options {
|
||||
analyser?: boolean;
|
||||
}
|
||||
|
||||
export function createConfig({analyser}: Options): Configuration {
|
||||
const plugins: Configuration['plugins'] = [];
|
||||
const minimize = Boolean(analyser);
|
||||
|
||||
if (analyser) {
|
||||
plugins.push(
|
||||
new BundleAnalyzerPlugin({analyzerMode: 'static', openAnalyzer: false}),
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
mode: 'development',
|
||||
entry: `./src/index.js`,
|
||||
output: {
|
||||
path: targetPath,
|
||||
filename: `index.js`,
|
||||
library: 'Draggable',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true,
|
||||
},
|
||||
optimization: {
|
||||
minimize,
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts'],
|
||||
modules: resolveModules,
|
||||
},
|
||||
plugins,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /(\.js)$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /(\.ts)$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,112 +0,0 @@
|
||||
import type {Configuration} from 'webpack';
|
||||
import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
|
||||
|
||||
import {targetPath, resolveModules} from './config';
|
||||
import {bundles} from './bundles';
|
||||
import type {Bundle} from './bundles';
|
||||
|
||||
interface Options {
|
||||
analyser?: boolean;
|
||||
}
|
||||
|
||||
function createBundleConfig(bundle: Bundle, {analyser}: Options) {
|
||||
const outputPath = bundle.path || '';
|
||||
const minimize = Boolean(analyser);
|
||||
const plugins: Configuration['plugins'] = [];
|
||||
const es5Plugins: Configuration['plugins'] = [];
|
||||
|
||||
if (analyser) {
|
||||
plugins.push(
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
openAnalyzer: false,
|
||||
reportFilename: `${bundle.filename}.html`,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const config: Configuration = {
|
||||
mode: 'production',
|
||||
entry: `./src/${bundle.source}`,
|
||||
output: {
|
||||
path: `${targetPath}${outputPath}`,
|
||||
filename: `${bundle.filename}.js`,
|
||||
library: bundle.name,
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true,
|
||||
},
|
||||
optimization: {
|
||||
minimize,
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts'],
|
||||
modules: resolveModules,
|
||||
},
|
||||
plugins,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /(\.js)$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /(\.ts)$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
if (analyser) {
|
||||
es5Plugins.push(
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
openAnalyzer: false,
|
||||
reportFilename: `${bundle.filename}.html`,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const es5Config = {
|
||||
...config,
|
||||
output: {
|
||||
...config.output,
|
||||
path: `${targetPath}es5/${outputPath}`,
|
||||
},
|
||||
plugins: es5Plugins,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /(\.js)$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
presets: [['@shopify/babel-preset']],
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /(\.ts)$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
return [config, es5Config];
|
||||
}
|
||||
|
||||
export function createConfig(options: Options): Configuration[] {
|
||||
return bundles.reduce<Configuration[]>(
|
||||
(configs, bundle) => [...configs, ...createBundleConfig(bundle, options)],
|
||||
[],
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import type {Stats, MultiStats} from 'webpack';
|
||||
|
||||
export function runner(error?: Error | null, stats?: Stats | MultiStats) {
|
||||
/* eslint-disable no-console */
|
||||
if (error) {
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(
|
||||
stats.toString({
|
||||
chunks: false,
|
||||
colors: true,
|
||||
}),
|
||||
);
|
||||
/* eslint-enable no-console */
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"extends": "@shopify/typescript-configs/base.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"rootDir": "../",
|
||||
"module": "commonjs",
|
||||
"target": "es2022",
|
||||
"esModuleInterop": true,
|
||||
"useUnknownInCatchVariables": false
|
||||
},
|
||||
"include": ["../config/**/*", "./**/*"]
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import webpack from 'webpack';
|
||||
|
||||
import {createConfig as createDevelopmentConfig} from './build/development';
|
||||
import {runner} from './build/runner';
|
||||
|
||||
const compiler = webpack(createDevelopmentConfig({analyser: false}));
|
||||
|
||||
compiler.watch(
|
||||
{
|
||||
aggregateTimeout: 300,
|
||||
poll: 1000,
|
||||
},
|
||||
runner,
|
||||
);
|
||||
@ -299,8 +299,6 @@ export class DragStopEvent extends DragEvent<DragEventData> {
|
||||
}
|
||||
|
||||
/**
|
||||
* (Added in: v1.0.0-beta.12)
|
||||
*
|
||||
* Drag stopped event
|
||||
* @class DragStoppedEvent
|
||||
* @module DragStoppedEvent
|
||||
|
||||
@ -166,8 +166,6 @@ 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.
|
||||
|
||||
|
||||
@ -162,8 +162,6 @@ export class MirrorMoveEvent extends MirrorEvent {
|
||||
}
|
||||
|
||||
/**
|
||||
* (Added in: v1.0.0-beta.13)
|
||||
*
|
||||
* Mirror moved event
|
||||
* @class MirrorMovedEvent
|
||||
* @module MirrorMovedEvent
|
||||
|
||||
@ -88,7 +88,7 @@ The mirror follows your mouse/touch movements.
|
||||
| **Interface** | `MirrorMoveEvent` |
|
||||
| **Cancelable** | true |
|
||||
| **Cancel action** | Stops mirror movement |
|
||||
| **type** | `mirror:move` |
|
||||
| **type** | `mirror:move` |
|
||||
|
||||
### API
|
||||
|
||||
@ -104,17 +104,15 @@ Read-only property for whether or not the mirror's threshold has been exceeded i
|
||||
|
||||
## MirrorMovedEvent
|
||||
|
||||
(Added in: v1.0.0-beta.13)
|
||||
|
||||
`MirrorMovedEvent` gets triggered when the **mirror:move** event was done.
|
||||
|
||||
| | |
|
||||
| ----------------- | --------------------- |
|
||||
| **Specification** | `MirrorEvent` |
|
||||
| **Interface** | `MirrorMovedEvent` |
|
||||
| **Cancelable** | false |
|
||||
| **Cancel action** | - |
|
||||
| **type** | `mirror:moved` |
|
||||
| | |
|
||||
| ----------------- | ------------------ |
|
||||
| **Specification** | `MirrorEvent` |
|
||||
| **Interface** | `MirrorMovedEvent` |
|
||||
| **Cancelable** | false |
|
||||
| **Cancel action** | - |
|
||||
| **type** | `mirror:moved` |
|
||||
|
||||
### API
|
||||
|
||||
@ -128,7 +126,6 @@ Read-only property for whether or not the mirror's threshold has been exceeded i
|
||||
**`mirrorEvent.passedThreshY: Booolean`**
|
||||
Read-only property for whether or not the mirror's threshold has been exceeded in the y axis.
|
||||
|
||||
|
||||
## MirrorDestroyEvent
|
||||
|
||||
`MirrorDestroyEvent` gets triggered before the mirror gets removed from the DOM.
|
||||
|
||||
@ -26,18 +26,16 @@ Defining this sets the offset from cursor to mirror manually on the x axis. Defa
|
||||
**`cursorOffsetY {Number|null}`**
|
||||
Defining this sets the offset from cursor to mirror manually on the y axis. Default: `null`
|
||||
|
||||
**`appendTo {String|HTMLElement|Function}`**
|
||||
**`appendTo {String|HTMLElement|Function}`**
|
||||
The mirror plugin allows you to specify where the mirror should be appended to. For clarification,
|
||||
this is not where the source will be placed, only the temporary mirror element, which is the 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}`**
|
||||
(Added in: v1.0.0-beta.9)
|
||||
**`thresholdX {Number|null}`**
|
||||
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}`**
|
||||
(Added in: v1.0.0-beta.9)
|
||||
**`thresholdY {Number|null}`**
|
||||
Defining this sets a threshold that must be exceeded by the mouse for the mirror to move on the y axis. Default: `null`
|
||||
|
||||
### Events
|
||||
@ -61,7 +59,7 @@ Defining this sets a threshold that must be exceeded by the mouse for the mirror
|
||||
#### y Axis only
|
||||
|
||||
```js
|
||||
import { Draggable } from '@shopify/draggable';
|
||||
import {Draggable} from '@shopify/draggable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
@ -69,15 +67,15 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
constrainDimensions: true,
|
||||
cursorOffsetX: 10,
|
||||
cursorOffsetY: 10,
|
||||
xAxis: false
|
||||
}
|
||||
xAxis: false,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### x Axis only
|
||||
|
||||
```js
|
||||
import { Sortable } from '@shopify/draggable';
|
||||
import {Sortable} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
@ -85,20 +83,20 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
constrainDimensions: true,
|
||||
cursorOffsetX: 10,
|
||||
cursorOffsetY: 10,
|
||||
yAxis: false
|
||||
}
|
||||
yAxis: false,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### Appending mirror
|
||||
|
||||
```js
|
||||
import { Sortable } from '@shopify/draggable';
|
||||
import {Sortable} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
mirror: {
|
||||
appendTo: '.some-other-element'
|
||||
}
|
||||
appendTo: '.some-other-element',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@ -2,34 +2,38 @@
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import { Draggable } from '@shopify/draggable';
|
||||
import {Draggable} from '@shopify/draggable';
|
||||
// Or
|
||||
// import Draggable from '@shopify/draggable/lib/draggable';
|
||||
import Draggable from '@shopify/draggable/build/esm/Draggable/Draggable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
draggable: 'li',
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All Bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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'
|
||||
});
|
||||
<script type="module">
|
||||
import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
});
|
||||
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -86,7 +90,7 @@ Returns draggable elements for given container, excluding potential mirror or or
|
||||
urce.
|
||||
**`draggable.cancel(): void`**
|
||||
Cancel current dragging state immediately
|
||||
*NOTE*: Can't revert elements that were changed to the beginning state (e.g sorted elements)
|
||||
_NOTE_: Can't revert elements that were changed to the beginning state (e.g sorted elements)
|
||||
|
||||
### Options
|
||||
|
||||
@ -99,7 +103,6 @@ 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:
|
||||
|
||||
@ -114,7 +117,6 @@ 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`
|
||||
|
||||
@ -127,14 +129,12 @@ 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
|
||||
@ -150,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 (Added in: v1.0.0-beta.12) | false | - |
|
||||
| [`drag:stopped`][dragstopped] | Gets fired when draggable finished | false | - |
|
||||
| [`drag:pressure`][dragpressure] | Gets fired when using force touch on draggable element | false | - |
|
||||
|
||||
[draggableinit]: DraggableEvent#draggableinitializedevent
|
||||
@ -167,8 +167,8 @@ Allow excluding default plugins and default sensors. Use with caution as it may
|
||||
|
||||
### Classes
|
||||
|
||||
| Name | Description | Default |
|
||||
| -------------------- | ------------------------------------------------------------------- | ---------------------------------- |
|
||||
| Name | Description | Default |
|
||||
| -------------------- | --------------------------------------------------------------------- | ---------------------------------- |
|
||||
| `body:dragging` | Classes added on the document body while dragging | `draggable--is-dragging` |
|
||||
| `container:dragging` | Classes added on the container where the draggable was picked up from | `draggable-container--is-dragging` |
|
||||
| `source:dragging` | Classes added on the draggable element that has been picked up | `draggable-source--is-dragging` |
|
||||
@ -179,15 +179,15 @@ Allow excluding default plugins and default sensors. Use with caution as it may
|
||||
| `source:original` | Classes added on the original source element, which is hidden on drag | `draggable--original` |
|
||||
| `mirror` | Classes added on the mirror element | `draggable-mirror` |
|
||||
|
||||
### Example
|
||||
### Examples
|
||||
|
||||
This sample code will make list items draggable:
|
||||
|
||||
```js
|
||||
import { Draggable } from '@shopify/draggable';
|
||||
import {Draggable} from '@shopify/draggable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
draggable: 'li',
|
||||
});
|
||||
|
||||
draggable.on('drag:start', () => console.log('drag:start'));
|
||||
@ -198,21 +198,21 @@ draggable.on('drag:stop', () => console.log('drag:stop'));
|
||||
Create draggable which excluded some default plugins and sensor:
|
||||
|
||||
```js
|
||||
import { Draggable } from '@shopify/draggable';
|
||||
import {Draggable} from '@shopify/draggable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
exclude: {
|
||||
plugins: [Draggable.Plugins.Focusable],
|
||||
sensors: [Draggable.Sensors.TouchSensor],
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Create draggable with specific classes:
|
||||
|
||||
```js
|
||||
import { Draggable } from '@shopify/draggable';
|
||||
import {Draggable} from '@shopify/draggable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
@ -223,8 +223,9 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
```
|
||||
|
||||
Cancel dragging on ESC key up:
|
||||
|
||||
```js
|
||||
import { Draggable } from '@shopify/draggable';
|
||||
import {Draggable} from '@shopify/draggable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
|
||||
@ -7,37 +7,44 @@ so they may returned if the drag is canceled or returned.
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import { Droppable } from '@shopify/draggable';
|
||||
import {Droppable} from '@shopify/draggable';
|
||||
// Or
|
||||
// import Droppable from '@shopify/draggable/lib/droppable';
|
||||
import Droppable from '@shopify/draggable/build/esm/Droppable/Droppable';
|
||||
|
||||
const droppable = new Droppable(document.querySelectorAll('.container'), {
|
||||
draggable: '.item',
|
||||
dropzone: '.dropzone'
|
||||
dropzone: '.dropzone',
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All Bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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',
|
||||
dropzone: '.dropzone'
|
||||
});
|
||||
<script type="module">
|
||||
import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.js';
|
||||
|
||||
const droppable = new Droppable(document.querySelectorAll('.container'), {
|
||||
draggable: '.item',
|
||||
dropzone: '.dropzone',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/droppable.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const droppable = new Droppable.default(document.querySelectorAll('.container'), {
|
||||
const droppable = new Draggable.Droppable(
|
||||
document.querySelectorAll('.container'),
|
||||
{
|
||||
draggable: '.item',
|
||||
dropzone: '.dropzone'
|
||||
});
|
||||
dropzone: '.dropzone',
|
||||
},
|
||||
);
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -57,12 +64,12 @@ elements within the `containers`.
|
||||
|
||||
Check out [Draggable events](../Draggable#events) for the base events
|
||||
|
||||
| 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 | - |
|
||||
| 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
|
||||
@ -73,10 +80,10 @@ Check out [Draggable events](../Draggable#events) for the base events
|
||||
|
||||
Check out [Draggable class identifiers](../Draggable#classes) for the base class identifiers
|
||||
|
||||
| Name | Description | Default |
|
||||
| -------------------- | ------------------------------------------------------------------------------ | ------------------------------- |
|
||||
| `droppable:active` | Class added to the unoccupied dropzone elements when drag starts | `draggable-droppable--active` |
|
||||
| `droppable:occupied` | Class added to the dropzone element when it contains a draggable element | `draggable-droppable--occupied` |
|
||||
| Name | Description | Default |
|
||||
| -------------------- | ------------------------------------------------------------------------ | ------------------------------- |
|
||||
| `droppable:active` | Class added to the unoccupied dropzone elements when drag starts | `draggable-droppable--active` |
|
||||
| `droppable:occupied` | Class added to the dropzone element when it contains a draggable element | `draggable-droppable--occupied` |
|
||||
|
||||
### Example
|
||||
|
||||
@ -84,9 +91,15 @@ This sample HTML and JavaScript will make `.item` elements draggable and droppab
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="dropzone draggable-dropzone--occupied"><div class="item">A</div></div>
|
||||
<div class="dropzone draggable-dropzone--occupied"><div class="item">B</div></div>
|
||||
<div class="dropzone draggable-dropzone--occupied"><div class="item">C</div></div>
|
||||
<div class="dropzone draggable-dropzone--occupied">
|
||||
<div class="item">A</div>
|
||||
</div>
|
||||
<div class="dropzone draggable-dropzone--occupied">
|
||||
<div class="item">B</div>
|
||||
</div>
|
||||
<div class="dropzone draggable-dropzone--occupied">
|
||||
<div class="item">C</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
@ -94,18 +107,25 @@ This sample HTML and JavaScript will make `.item` elements draggable and droppab
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.item { height: 100%; }
|
||||
.dropzone { outline: solid 1px; height: 50px; }
|
||||
.draggable-dropzone--occupied { background: lightgreen; }
|
||||
.item {
|
||||
height: 100%;
|
||||
}
|
||||
.dropzone {
|
||||
outline: solid 1px;
|
||||
height: 50px;
|
||||
}
|
||||
.draggable-dropzone--occupied {
|
||||
background: lightgreen;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Droppable } from '@shopify/draggable';
|
||||
import {Droppable} from '@shopify/draggable';
|
||||
|
||||
const droppable = new Droppable(document.querySelectorAll('.container'), {
|
||||
draggable: '.item',
|
||||
dropzone: '.dropzone'
|
||||
dropzone: '.dropzone',
|
||||
});
|
||||
|
||||
droppable.on('droppable:dropped', () => console.log('droppable:dropped'));
|
||||
|
||||
@ -7,42 +7,46 @@ This plugin is not included by default, so make sure to import it before using.
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
```js
|
||||
import { Draggable, Plugins } from "@shopify/draggable";
|
||||
// Or
|
||||
// import Draggable from '@shopify/draggable/lib/draggable';
|
||||
// import Collidable from '@shopify/draggable/lib/plugins/collidable';
|
||||
- NPM:
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll("ul"), {
|
||||
draggable: "li",
|
||||
collidables: ".other-list",
|
||||
```js
|
||||
import {Draggable, Plugins} from '@shopify/draggable';
|
||||
// Or
|
||||
import Draggable from '@shopify/draggable/build/esm/Draggable/Draggable';
|
||||
import Collidable from '@shopify/draggable/build/esm/Plugins/Collidable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
collidables: '.other-list',
|
||||
plugins: [Plugins.Collidable], // Or [Collidable]
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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',
|
||||
collidables: '.other-list',
|
||||
plugins: [Draggable.Plugins.Collidable]
|
||||
});
|
||||
<script type="module">
|
||||
import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
|
||||
import Collidable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Collidable.js';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
collidables: '.other-list',
|
||||
plugins: [Collidable],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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 src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
collidables: '.other-list',
|
||||
plugins: [Collidable.default]
|
||||
});
|
||||
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
collidables: '.other-list',
|
||||
plugins: [Draggable.Plugins.Collidable],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -64,12 +68,12 @@ A css selector string, an array of elements, a NodeList, a HTMLElement or a func
|
||||
### Example
|
||||
|
||||
```js
|
||||
import { Sortable, Plugins } from '@shopify/draggable';
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
collidables: '.other-list',
|
||||
plugins: [Plugins.Collidable]
|
||||
plugins: [Plugins.Collidable],
|
||||
});
|
||||
|
||||
sortable.on('collidable:in', () => console.log('collidable:in'));
|
||||
|
||||
@ -13,39 +13,43 @@ This plugin is not included in the default Draggable bundle, so you'll need to i
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import { Draggable, Plugins } from "@shopify/draggable";
|
||||
import {Draggable, Plugins} from '@shopify/draggable';
|
||||
// Or
|
||||
// import Draggable from '@shopify/draggable/lib/draggable';
|
||||
// import ResizeMirror from '@shopify/draggable/lib/plugins/resize-mirror';
|
||||
import Draggable from '@shopify/draggable/build/esm/Draggable/Draggable';
|
||||
import ResizeMirror from '@shopify/draggable/build/esm/Plugins/ResizeMirror';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Plugins.ResizeMirror] // Or [ResizeMirror]
|
||||
plugins: [Plugins.ResizeMirror], // Or [ResizeMirror]
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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',
|
||||
plugins: [Draggable.Plugins.ResizeMirror]
|
||||
});
|
||||
<script type="module">
|
||||
import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
|
||||
import ResizeMirror from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/ResizeMirror.js';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [ResizeMirror],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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 src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [ResizeMirror.default]
|
||||
});
|
||||
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Draggable.Plugins.ResizeMirror],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -61,11 +65,11 @@ _No options_
|
||||
### Examples
|
||||
|
||||
```js
|
||||
import { Sortable, Plugins } from '@shopify/draggable';
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Plugins.ResizeMirror]
|
||||
plugins: [Plugins.ResizeMirror],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -7,40 +7,43 @@ This plugin is not included by default, so make sure to import it before using.
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
```js
|
||||
import { Draggable, Plugins } from "@shopify/draggable";
|
||||
// Or
|
||||
// import Draggable from '@shopify/draggable/lib/draggable';
|
||||
// import Snappable from '@shopify/draggable/lib/plugins/snappable';
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import {Draggable, Plugins} from '@shopify/draggable';
|
||||
// Or
|
||||
import Draggable from '@shopify/draggable/build/esm/Draggable/Draggable';
|
||||
import Snappable from '@shopify/draggable/build/esm/Plugins/Snappable';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Plugins.Snappable] // Or [Snappable]
|
||||
plugins: [Plugins.Snappable], // Or [Snappable]
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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',
|
||||
plugins: [Draggable.Plugins.Snappable]
|
||||
});
|
||||
<script type="module">
|
||||
import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
|
||||
import Snappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Snappable.js';
|
||||
|
||||
const draggable = new Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Snappable],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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 src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Snappable.default]
|
||||
});
|
||||
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Draggable.Plugins.Snappable],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -61,11 +64,11 @@ _No options_
|
||||
### Example
|
||||
|
||||
```js
|
||||
import { Sortable, Plugins } from '@shopify/draggable';
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
plugins: [Plugins.Snappable]
|
||||
plugins: [Plugins.Snappable],
|
||||
});
|
||||
|
||||
sortable.on('snap:in', () => console.log('snap:in'));
|
||||
|
||||
@ -4,20 +4,21 @@ The sort animation plugin currently only works with `Sortable`. It adds sort ani
|
||||
and animates all sorted elements via `translate3d`. It is currently possible to change the duration and
|
||||
the easing function of the animation.
|
||||
|
||||
It different with [SwapAnimation](https://github.com/Shopify/draggable/tree/master/src/Plugins/SwapAnimation) plugin because SwapAnimation only support horizontal or vertical layout.
|
||||
It different with [SwapAnimation](https://github.com/Shopify/draggable/tree/main/src/Plugins/SwapAnimation) plugin because SwapAnimation only support horizontal or vertical layout.
|
||||
|
||||
This plugin is not included by default, so make sure to import it before using.
|
||||
|
||||
**NOTE**: Don't use this plugin with [SwapAnimation](https://github.com/Shopify/draggable/tree/master/src/Plugins/SwapAnimation) plugin to avoid conflict.
|
||||
**NOTE**: Don't use this plugin with [SwapAnimation](https://github.com/Shopify/draggable/tree/main/src/Plugins/SwapAnimation) plugin to avoid conflict.
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import { Sortable, Plugins } from "@shopify/draggable";
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
// Or
|
||||
// import Sortable from '@shopify/draggable/lib/sortable';
|
||||
// import SortAnimation from '@shopify/draggable/lib/plugins/sort-animation';
|
||||
import Sortable from '@shopify/draggable/build/esm/Sortable/Sortable';
|
||||
import SortAnimation from '@shopify/draggable/build/esm/Plugins/SortAnimation';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
@ -25,38 +26,41 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
},
|
||||
plugins: [Plugins.SortAnimation] // Or [SortAnimation]
|
||||
plugins: [Plugins.SortAnimation], // Or [SortAnimation]
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All plugins bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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',
|
||||
sortAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
},
|
||||
plugins: [Draggable.Plugins.SortAnimation]
|
||||
});
|
||||
<script type="module">
|
||||
import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
|
||||
import Snappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Snappable.js';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
sortAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
},
|
||||
plugins: [Snappable],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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 src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
sortAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
},
|
||||
plugins: [SortAnimation.default]
|
||||
});
|
||||
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
sortAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
},
|
||||
plugins: [Draggable.Plugins.SortAnimation],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -76,7 +80,7 @@ The easing option allows you to specify an animation easing function. Default: `
|
||||
### Examples
|
||||
|
||||
```js
|
||||
import { Sortable, Plugins } from '@shopify/draggable';
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
@ -84,7 +88,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
},
|
||||
plugins: [Plugins.SortAnimation]
|
||||
plugins: [Plugins.SortAnimation],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -16,8 +16,6 @@ export const defaultOptions = {
|
||||
};
|
||||
|
||||
/**
|
||||
* (Added in: v1.0.0-beta.10)
|
||||
*
|
||||
* SortAnimation plugin adds sort animation for sortable
|
||||
* @class SortAnimation
|
||||
* @module SortAnimation
|
||||
|
||||
@ -8,55 +8,58 @@ This plugin is not included by default, so make sure to import it before using.
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
```js
|
||||
import { Sortable, Plugins } from "@shopify/draggable";
|
||||
// Or
|
||||
// import Sortable from '@shopify/draggable/lib/sortable';
|
||||
// import SwapAnimation from '@shopify/draggable/lib/plugins/swap-animation';
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
// Or
|
||||
import Sortable from '@shopify/draggable/build/esm/Sortable/Sortable';
|
||||
import SwapAnimation from '@shopify/draggable/build/esm/Plugins/SwapAnimation';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
swapAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
horizontal: true
|
||||
horizontal: true,
|
||||
},
|
||||
plugins: [Plugins.SwapAnimation] // Or [SwapAnimation]
|
||||
plugins: [Plugins.SwapAnimation], // Or [SwapAnimation]
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All plugins bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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',
|
||||
swapAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
horizontal: true
|
||||
},
|
||||
plugins: [Draggable.Plugins.SwapAnimation]
|
||||
});
|
||||
<script type="module">
|
||||
import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
|
||||
import SwapAnimation from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/SwapAnimation.js';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
swapAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
horizontal: true,
|
||||
},
|
||||
plugins: [SwapAnimation],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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 src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
swapAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
horizontal: true
|
||||
},
|
||||
plugins: [SwapAnimation.default]
|
||||
});
|
||||
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
swapAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
horizontal: true,
|
||||
},
|
||||
plugins: [Draggable.Plugins.SwapAnimation],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -79,16 +82,16 @@ The horizontal option allows you to set the elements to animate horizontally. De
|
||||
### Examples
|
||||
|
||||
```js
|
||||
import { Sortable, Plugins } from '@shopify/draggable';
|
||||
import {Sortable, Plugins} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
swapAnimation: {
|
||||
duration: 200,
|
||||
easingFunction: 'ease-in-out',
|
||||
horizontal: true
|
||||
horizontal: true,
|
||||
},
|
||||
plugins: [Plugins.SwapAnimation]
|
||||
plugins: [Plugins.SwapAnimation],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -7,34 +7,38 @@ Make sure to nest draggable elements as immediate children elements to their cor
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import { Sortable } from '@shopify/draggable';
|
||||
import {Sortable} from '@shopify/draggable';
|
||||
// Or
|
||||
// import Sortable from '@shopify/draggable/lib/sortable';
|
||||
import Sortable from '@shopify/draggable/build/esm/Sortable/Sortable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
draggable: 'li',
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All Bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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'
|
||||
});
|
||||
<script type="module">
|
||||
import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<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/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
});
|
||||
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -71,10 +75,10 @@ Check out [Draggables class identifiers](../Draggable#classes)
|
||||
This sample code will make list items sortable:
|
||||
|
||||
```js
|
||||
import { Sortable } from '@shopify/draggable';
|
||||
import {Sortable} from '@shopify/draggable';
|
||||
|
||||
const sortable = new Sortable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
draggable: 'li',
|
||||
});
|
||||
|
||||
sortable.on('sortable:start', () => console.log('sortable:start'));
|
||||
|
||||
@ -5,34 +5,38 @@ so any draggable element that gets dragged over will be swapped with the source
|
||||
|
||||
### Usage
|
||||
|
||||
- ES6:
|
||||
- NPM:
|
||||
|
||||
```js
|
||||
import { Swappable } from '@shopify/draggable';
|
||||
import {Swappable} from '@shopify/draggable';
|
||||
// Or
|
||||
// import Swappable from '@shopify/draggable/lib/swappable';
|
||||
import Swappable from '@shopify/draggable/build/esm/Swappable/Swappable';
|
||||
|
||||
const swappable = new Swappable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
draggable: 'li',
|
||||
});
|
||||
```
|
||||
|
||||
- Browser (All Bundle):
|
||||
- Browser (as a module):
|
||||
|
||||
```html
|
||||
<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'
|
||||
});
|
||||
<script type="module">
|
||||
import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.js';
|
||||
|
||||
const swappable = new Swappable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
- Browser (Standalone):
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/swappable.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
|
||||
<script>
|
||||
const swappable = new Swappable.default(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
});
|
||||
const swappable = new Draggable.Swappable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -69,10 +73,10 @@ Check out [Draggables class identifiers](../Draggable#classes)
|
||||
This sample code will make list items draggable and allows you to swap them with other draggable elements:
|
||||
|
||||
```js
|
||||
import { Swappable } from '@shopify/draggable';
|
||||
import {Swappable} from '@shopify/draggable';
|
||||
|
||||
const swappable = new Swappable(document.querySelectorAll('ul'), {
|
||||
draggable: 'li'
|
||||
draggable: 'li',
|
||||
});
|
||||
|
||||
swappable.on('swappable:start', () => console.log('swappable:start'));
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import 'core-js/es/symbol';
|
||||
import 'core-js/es/promise';
|
||||
|
||||
import AbstractEvent from 'shared/AbstractEvent';
|
||||
import AbstractPlugin from 'shared/AbstractPlugin';
|
||||
|
||||
import * as Sensors from './Draggable/Sensors';
|
||||
import * as Plugins from './Plugins';
|
||||
import Draggable from './Draggable';
|
||||
import Droppable from './Droppable';
|
||||
import Swappable from './Swappable';
|
||||
import Sortable from './Sortable';
|
||||
|
||||
export {
|
||||
AbstractEvent as BaseEvent,
|
||||
AbstractPlugin as BasePlugin,
|
||||
Draggable,
|
||||
Droppable,
|
||||
Swappable,
|
||||
Sortable,
|
||||
Sensors,
|
||||
Plugins,
|
||||
};
|
||||
@ -1,11 +0,0 @@
|
||||
import * as RealBundle from '../index';
|
||||
import * as LegacyBundle from '../index.legacy';
|
||||
|
||||
describe('Package', () => {
|
||||
it('exports the same bundles for legacy bundle', () => {
|
||||
const realExports = Object.keys(RealBundle);
|
||||
const legacyExports = Object.keys(LegacyBundle);
|
||||
|
||||
expect(legacyExports).toStrictEqual(realExports);
|
||||
});
|
||||
});
|
||||
@ -1,19 +1,21 @@
|
||||
{
|
||||
"extends": "@shopify/typescript-configs/library",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"rootDir": ".",
|
||||
"lib": ["es2023"],
|
||||
"resolveJsonModule": false,
|
||||
"verbatimModuleSyntax": true,
|
||||
"useUnknownInCatchVariables": false,
|
||||
"composite": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "build/ts",
|
||||
"rootDir": "./",
|
||||
"strictFunctionTypes": false,
|
||||
"paths": {
|
||||
"shared/*": ["./src/shared/*"],
|
||||
"helper": ["./test/helper.ts"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./config/typescript/**/*",
|
||||
"./src/**/*",
|
||||
"./test/**/*"
|
||||
"./test/**/*",
|
||||
"./rollup.config.ts",
|
||||
"./rollup.development.config.ts"
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user