Merge pull request #2 from miralize/fix/droppable-events

Fix; Add support for extra droppable events
zjffun · Jan 9, 2021 · 98f59a9 · 98f59a9
2 parents 04fff43 + 98dbf0a
commit 98f59a9
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ Vue component of Shopify draggable.
 npm:
 
 ```bash
-npm install vue-shopify-draggable 
+npm install vue-shopify-draggable
 # peer dependencies
 npm install vue @shopify/draggable
 ```
@@ -211,7 +211,7 @@ Example
 <div id="VueEl"></div>
 
 <script type="text/template" id="VueTemplate">
-  <vue-droppable :options="options" @droppable:dropped="dropped">
+  <vue-droppable :options="options" @droppable:start="start" @droppable:dropped="dropped">
     <vue-draggable-container>
       <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item1</div></div>
       <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item2</div></div>
@@ -245,6 +245,9 @@ Example
       dropped: function (e) {
         console.log(e);
       },
+      start: function (e) {
+        console.log(e);
+      },
     },
   });
 </script>

diff --git a/src/droppable/Droppable.js b/src/droppable/Droppable.js
@@ -1,7 +1,7 @@
 import { Droppable } from '@shopify/draggable';
 import draggableMixin from '../draggable-mixin';
 
-const events = ['droppable:dropped', 'droppable:returned'];
+const events = ['droppable:start', 'droppable:dropped', 'droppable:returned', 'droppable:stop'];
 
 export default {
   name: 'VueDroppable',

diff --git a/src/droppable/tests/Droppable.test.js b/src/droppable/tests/Droppable.test.js
@@ -44,6 +44,48 @@ describe('Droppable', () => {
   });
 
   describe('events', () => {
+    it('droppable:start', async () => {
+      const spy = jasmine.createSpy('droppable:start');
+      vueInstance = new Vue({
+        el,
+        template: `
+          <vue-droppable @droppable:start="func" :options="options" ref="droppable">
+            <vue-draggable-container>
+              <div class="dropzone draggable-dropzone--occupied" ref="dropzone1">
+                <div class="item" ref="item">
+                  draggable-source-1
+                </div>
+              </div>
+            </vue-draggable-container>
+            <vue-draggable-container>
+              <div class="dropzone" ref="dropzone2"></div>
+            </vue-draggable-container>
+          </vue-droppable>
+        `,
+        data() {
+          return {
+            options: {
+              draggable: '.item',
+              dropzone: '.dropzone',
+            },
+          };
+        },
+        methods: {
+          func(e) {
+            expect(e.constructor.name).toBe(Droppable.DroppableStartEvent.name);
+            spy();
+          },
+        },
+      });
+
+      await drag({
+        from: vueInstance.$refs.item,
+        to: vueInstance.$refs.dropzone2,
+      });
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
     it('droppable:dropped', async () => {
       const spy = jasmine.createSpy('droppable:dropped');
       vueInstance = new Vue({
@@ -129,5 +171,47 @@ describe('Droppable', () => {
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
+
+    it('droppable:stop', async () => {
+      const spy = jasmine.createSpy('droppable:stop');
+      vueInstance = new Vue({
+        el,
+        template: `
+          <vue-droppable @droppable:stop="func" :options="options" ref="droppable">
+            <vue-draggable-container>
+              <div class="dropzone draggable-dropzone--occupied" ref="dropzone1">
+                <div class="item" ref="item">
+                  draggable-source-1
+                </div>
+              </div>
+            </vue-draggable-container>
+            <vue-draggable-container>
+              <div class="dropzone" ref="dropzone2"></div>
+            </vue-draggable-container>
+          </vue-droppable>
+        `,
+        data() {
+          return {
+            options: {
+              draggable: '.item',
+              dropzone: '.dropzone',
+            },
+          };
+        },
+        methods: {
+          func(e) {
+            expect(e.constructor.name).toBe(Droppable.DroppableStopEvent.name);
+            spy();
+          },
+        },
+      });
+
+      await drag({
+        from: vueInstance.$refs.item,
+        to: vueInstance.$refs.dropzone2,
+      });
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
   });
 });