Merge pull request #443 from bahung1221/beta12

Update to v1.0.0-beta.12

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v1.0.0-beta.12 - 2020-09-29
+
+### Added
+
+- Added `drag:stopped` event that will be fired after drag finished
+- Support specifying an array of class name to Draggable `classes` option
+
+### 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 missing `overContainer` property in **DragOutEvent**
+
 ## v1.0.0-beta.11 - 2020-07-14
 
 ### Added

README.md

@@ -57,19 +57,19 @@ or via CDN
 
 ```html
 <!-- Entire bundle -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.bundle.js"></script>
 <!-- legacy bundle for older browsers (IE11) -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.legacy.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.bundle.legacy.js"></script>
 <!-- Draggable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.js"></script>
 <!-- Sortable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/sortable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/sortable.js"></script>
 <!-- Droppable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/droppable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/droppable.js"></script>
 <!-- Swappable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/swappable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/swappable.js"></script>
 <!-- Plugins only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/plugins.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/plugins.js"></script>
 ```
 
 ## Browser Compatibility
@@ -151,7 +151,7 @@ For more information, please checkout the [contributing document](https://github
 
 ## Roadmap
 
-We are currently working on `v1.0.0-beta.11`. 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.11`.
+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`.
 
 ## Related resources
 

package.json

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

src/Draggable/README.md

@@ -15,7 +15,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 - Browser (All Bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/draggable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.js"></script>
 <script>
     const draggable = new Draggable.default(document.querySelectorAll('ul'), {
       draggable: 'li'

src/Droppable/README.md

@@ -21,7 +21,7 @@ const droppable = new Droppable(document.querySelectorAll('.container'), {
 
 - Browser (All Bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/droppable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/droppable.js"></script>
 <script>
     const droppable = new Droppable.default(document.querySelectorAll('.container'), {
       draggable: '.item',

src/Plugins/Collidable/README.md

@@ -23,7 +23,7 @@ const draggable = new Draggable(document.querySelectorAll("ul"), {
 
 - Browser (All bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/draggable.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/plugins/collidable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/plugins/collidable.js"></script>
 <script>
     const draggable = new Draggable.default(document.querySelectorAll('ul'), {
       draggable: 'li',

src/Plugins/ResizeMirror/README.md

@@ -28,7 +28,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 - Browser (All bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/draggable.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/plugins/resize-mirror.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/plugins/resize-mirror.js"></script>
 <script>
     const draggable = new Draggable.default(document.querySelectorAll('ul'), {
       draggable: 'li',

src/Plugins/Snappable/README.md

@@ -23,7 +23,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 - Browser (All bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/draggable.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/plugins/snappable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/draggable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/plugins/snappable.js"></script>
 <script>
     const draggable = new Draggable.default(document.querySelectorAll('ul'), {
       draggable: 'li',

src/Plugins/SortAnimation/README.md

@@ -31,7 +31,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
 
 - Browser (All plugins bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/sortable.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/plugins/sort-animation.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/sortable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/plugins/sort-animation.js"></script>
 <script>
     const sortable = new Sortable.default(document.querySelectorAll('ul'), {
       draggable: 'li',

src/Plugins/SwapAnimation/README.md

@@ -29,7 +29,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
 
 - Browser (All plugins bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/sortable.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/plugins/swap-animation.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/sortable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/plugins/swap-animation.js"></script>
 <script>
     const sortable = new Sortable.default(document.querySelectorAll('ul'), {
       draggable: 'li',

src/Sortable/README.md

@@ -20,7 +20,7 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
 
 - Browser (All Bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/sortable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/sortable.js"></script>
 <script>
     const sortable = new Sortable.default(document.querySelectorAll('ul'), {
       draggable: 'li'

src/Swappable/README.md

@@ -18,7 +18,7 @@ const swappable = new Swappable(document.querySelectorAll('ul'), {
 
 - Browser (All Bundle):
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].11/lib/draggable.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/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/[email protected].11/lib/swappable.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected].12/lib/swappable.js"></script>
 <script>
     const swappable = new Swappable.default(document.querySelectorAll('ul'), {
       draggable: 'li'