├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .vuepress
    ├── components
    │   ├── BaseButton.vue
    │   ├── BaseSwitch.vue
    │   ├── DemoInteractDraggable.vue
    │   ├── DemoInteractDraggableWithEventBus.vue
    │   └── styles
    │   │   ├── animations.scss
    │   │   ├── colors.scss
    │   │   ├── index.scss
    │   │   ├── mixins.scss
    │   │   └── typography.scss
    ├── config.js
    └── enhanceApp.js
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── docs
    └── vue2InteractDraggable
    │   └── README.md
├── package.json
├── rollup.config.js
├── src
    ├── components
    │   └── Vue2InteractDraggable.vue
    ├── index.js
    └── interact-event-bus.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/*.js
2 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['eslint:recommended', 'plugin:vue/recommended'],
 3 |   parserOptions: {
 4 |     parser: 'babel-eslint',
 5 |   },
 6 |   env: {
 7 |     node: true,
 8 |     browser: true
 9 |   },
10 |   'rules': {
11 |     'generator-star-spacing': 0,
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
13 |   },
14 |   globals: {
15 |     requestAnimationFrame: true,
16 |     performance: true
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | dist
5 | yarn-error.log
6 | PLAN.md
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.vuepress/components/BaseButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button
 3 |     class="button"
 4 |     :class="{ animate: clicked }"
 5 |     @click="click"
 6 |   >
 7 |     <span class="button__label">
 8 |       {{ label }}
 9 |     </span>
10 |   </button>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     label: {
17 |       type: String,
18 |       required: true,
19 |     },
20 |   },
21 | 
22 |   data() {
23 |     return {
24 |       clicked: false,
25 |     };
26 |   },
27 | 
28 |   methods: {
29 |     click() {
30 |       this.clicked = true;
31 |       this.$emit('click');
32 | 
33 |       setTimeout(() => {
34 |         this.clicked = false;
35 |       }, 600);
36 |     },
37 |   },
38 | };
39 | </script>
40 | 
41 | <style lang="scss" scoped>
42 | @import "./styles/index.scss";
43 | 
44 | .button {
45 |   @include circle(50px);
46 | 
47 |   display: flex;
48 |   flex-direction: column;
49 |   align-items: center;
50 |   padding: 0;
51 |   outline: none;
52 |   justify-content: center;
53 |   border: 1px solid $primary-gradient-end;
54 |   background-color: transparent;
55 |   transition: all 0.3s ease-in-out;
56 | 
57 |   &:hover {
58 |     background-color: $primary-gradient-end;
59 | 
60 |     .button__label {
61 |       color: $c-white;
62 |     }
63 |   }
64 | 
65 |   &:global(.animate) {
66 |     pointer-events: none;
67 |     animation: scaleUpAndDown 0.6s;
68 |     animation-timing-function: ease-in-out;
69 |   }
70 | 
71 |   &__label {
72 |     min-width: 50px;
73 |     font-size: 32px;
74 |     color: $primary-gradient-end;
75 |   }
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/.vuepress/components/BaseSwitch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="switch-container">
  3 |     <span class="switch-label" :class="{ isSelected: checked }">{{ label }}</span>
  4 |     <span
  5 |       class="switch"
  6 |     >
  7 |       <input
  8 |         class="switchInput"
  9 |         :checked="checked"
 10 |         type="checkbox"
 11 |       >
 12 |       <span
 13 |         ref="interactElement"
 14 |         class="switchHandle"
 15 |       />
 16 |     </span>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import interact from 'interact.js';
 22 | 
 23 | export default {
 24 |   props: {
 25 |     checked: {
 26 |       type: Boolean,
 27 |       default: false,
 28 |     },
 29 |     label: {
 30 |       type: String,
 31 |       default: ''
 32 |     },
 33 |   },
 34 | 
 35 |   data() {
 36 |     return {
 37 |       value: null,
 38 |     };
 39 |   },
 40 | 
 41 |   watch: {
 42 |     value(value) {
 43 |       this.$emit('change', value);
 44 |     },
 45 |     checked(value) {
 46 |       this.value = value;
 47 |     },
 48 |   },
 49 | 
 50 |   beforeMount() {
 51 |     this.value = this.checked;
 52 |   },
 53 | 
 54 |   mounted() {
 55 |     this.$emit('change', this.value);
 56 | 
 57 |     interact(this.$refs.interactElement)
 58 |       .draggable({
 59 |         onmove: (event) => {
 60 |           if (event.dx > 0 && this.value !== true) this.value = true;
 61 |           if (event.dx < 0 && this.value !== false) this.value = false;
 62 |         },
 63 |       })
 64 |       .on('tap', () => { this.value = !this.value; });
 65 |   },
 66 | };
 67 | </script>
 68 | 
 69 | <style lang="scss" scoped>
 70 | @import "./styles/index.scss";
 71 | 
 72 | .switch-container {
 73 |   display: flex;
 74 |   align-items: center;
 75 |   max-width: 300px;
 76 |   justify-content: space-between;
 77 | }
 78 | 
 79 | .switch-label {
 80 |   margin-right: 10px;
 81 |   font-size: 14px;
 82 | 
 83 |   &.isSelected {
 84 |     color: $primary-gradient-end;
 85 |   }
 86 | }
 87 | 
 88 | .switch {
 89 |   @include sizing(52px 31px);
 90 | 
 91 |   position: relative;
 92 |   display: inline-block;
 93 | 
 94 |   &Handle {
 95 |     @include absolute(top 0 right 0 bottom 0 left 0);
 96 | 
 97 |     cursor: pointer;
 98 |     border-radius: 18px;
 99 |     background: grey;
100 |     transition: 0.4s;
101 | 
102 |     @include before() {
103 |       @include circle(26px);
104 |       @include absolute(top 1px left 0);
105 | 
106 |       border: 1px solid $c-white;
107 |       background-color: $c-white;
108 |       transform: translateX(2px);
109 |       transition: all 0.4s;
110 |       box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
111 |     }
112 |   }
113 | 
114 |   &Input {
115 |     display: none;
116 | 
117 |     &:checked + .switchHandle {
118 |       background-color: $primary-gradient-end;
119 |     }
120 | 
121 |     &:focus + .switchHandle {
122 |       box-shadow: 0;
123 |     }
124 | 
125 |     &:checked + .switchHandle::before {
126 |       transform: translateX(22px);
127 |     }
128 |   }
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/.vuepress/components/DemoInteractDraggable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <section class="draggable-container">
  4 |       <Vue2InteractDraggable
  5 |         class="card"
  6 |         @draggedDown="draggedDown"
  7 |         @draggedLeft="draggedLeft"
  8 |         @draggedRight="draggedRight"
  9 |         @draggedUp="draggedUp"
 10 |         :interact-block-drag-down="interactBlockDragDown"
 11 |         :interact-block-drag-left="interactBlockDragLeft"
 12 |         :interact-block-drag-right="interactBlockDragRight"
 13 |         :interact-block-drag-up="interactBlockDragUp"
 14 |         :interact-max-rotation="15"
 15 |         :interact-lock-x-axis="interactLockXAxis"
 16 |         :interact-lock-y-axis="interactLockYAxis"
 17 |         :interact-lock-swipe-down="interactLockSwipeDown"
 18 |         :interact-lock-swipe-left="interactLockSwipeLeft"
 19 |         :interact-lock-swipe-right="interactLockSwipeRight"
 20 |         :interact-lock-swipe-up="interactLockSwipeUp"
 21 |         :interact-out-of-sight-x-coordinate="500"
 22 |         :interact-x-threshold="200"
 23 |       >
 24 |         <div>
 25 |           <h3 class="card__title">Drag me!</h3>
 26 |         </div>
 27 |       </Vue2InteractDraggable>
 28 |     </section>
 29 |     <h3>Available properties:</h3>
 30 |     <section class="switches">
 31 |       <article class="switches__article">
 32 |         <h4>interact-block</h4>
 33 |         <BaseSwitch
 34 |           class="property-switch"
 35 |           label="interact-block-drag-down"
 36 |           :checked="interactBlockDragDown === true"
 37 |           @change="interactBlockDragDown = $event"
 38 |         />
 39 |         <BaseSwitch
 40 |           class="property-switch"
 41 |           label="interact-block-drag-left"
 42 |           :checked="interactBlockDragLeft === true"
 43 |           @change="interactBlockDragLeft = $event"
 44 |         />
 45 |         <BaseSwitch
 46 |           class="property-switch"
 47 |           label="interact-block-drag-right"
 48 |           :checked="interactBlockDragRight === true"
 49 |           @change="interactBlockDragRight = $event"
 50 |         />
 51 |         <BaseSwitch
 52 |           class="property-switch"
 53 |           label="interact-block-drag-up"
 54 |           :checked="interactBlockDragUp === true"
 55 |           @change="interactBlockDragUp = $event"
 56 |         />
 57 |       </article>
 58 |       <article class="switches__article">
 59 |         <h4>interact-lock</h4>
 60 |         <BaseSwitch
 61 |           class="property-switch"
 62 |           label="interact-lock-x-axis"
 63 |           :checked="interactLockXAxis === true"
 64 |           @change="interactLockXAxis = $event"
 65 |         />
 66 |         <BaseSwitch
 67 |           class="property-switch"
 68 |           label="interact-lock-y-axis"
 69 |           :checked="interactLockYAxis === true"
 70 |           @change="interactLockYAxis = $event"
 71 |         />
 72 |       </article>
 73 |       <article class="switches__article">
 74 |         <h4>interact-lock-swipe</h4>
 75 |         <BaseSwitch
 76 |           class="property-switch"
 77 |           label="interact-lock-swipe-down"
 78 |           :checked="interactLockSwipeDown === true"
 79 |           @change="interactLockSwipeDown = $event"
 80 |         />
 81 |         <BaseSwitch
 82 |           class="property-switch"
 83 |           label="interact-lock-swipe-left"
 84 |           :checked="interactLockSwipeLeft === true"
 85 |           @change="interactLockSwipeLeft = $event"
 86 |         />
 87 |         <BaseSwitch
 88 |           class="property-switch"
 89 |           label="interact-lock-swipe-right"
 90 |           :checked="interactLockSwipeRight === true"
 91 |           @change="interactLockSwipeRight = $event"
 92 |         />
 93 |         <BaseSwitch
 94 |           class="property-switch"
 95 |           label="interact-lock-swipe-up"
 96 |           :checked="interactLockSwipeUp === true"
 97 |           @change="interactLockSwipeUp = $event"
 98 |         />
 99 |       </article>
100 |     </section>
101 |   </div>
102 | 
103 | </template>
104 | 
105 | <script>
106 | export default {
107 |   data() {
108 |     return {
109 |       interactBlockDragDown: false,
110 |       interactBlockDragLeft: false,
111 |       interactBlockDragRight: false,
112 |       interactBlockDragUp: false,
113 |       interactLockXAxis: false,
114 |       interactLockYAxis: false,
115 |       interactLockSwipeDown: false,
116 |       interactLockSwipeLeft: false,
117 |       interactLockSwipeRight: false,
118 |       interactLockSwipeUp: false,
119 |     };
120 |   },
121 | 
122 |   methods: {
123 |     draggedDown() {
124 |       console.log('dragged down!')
125 |       this.hideCard();
126 |     },
127 | 
128 |     draggedLeft() {
129 |       console.log('dragged left!')
130 |       this.hideCard();
131 |     },
132 | 
133 |     draggedRight() {
134 |       console.log('dragged right!')
135 |       this.hideCard();
136 |     },
137 | 
138 |     draggedUp() {
139 |       console.log('dragged down!')
140 |       this.hideCard();
141 |     },
142 | 
143 |     hideCard() {
144 |       setTimeout(() => {
145 |         this.isShowing = false;
146 |       }, 200);
147 |       setTimeout(() => {
148 |         this.isShowing = true;
149 |       }, 1000);
150 |     }
151 |   }
152 | };
153 | </script>
154 | 
155 | <style lang="scss" scoped>
156 | @import "./styles/index.scss";
157 | 
158 | $cardsWidth: 200px;
159 | $fs-card-title: 1.125em;
160 | 
161 | .container {
162 |   margin-top: 100px;
163 | }
164 | 
165 | .draggable-container {
166 |   @include sizing($cardsWidth);
167 | 
168 |   display: flex;
169 |   margin: auto auto 100px;
170 | }
171 | 
172 | .switches {
173 |   display: flex;
174 |   justify-content: space-between;
175 |   flex-wrap: wrap;
176 | 
177 |   &__article {
178 |     margin-right: 30px;
179 |   }
180 | }
181 | 
182 | .property-switch {
183 |   margin-top: 5px;
184 | }
185 | 
186 | .card {
187 |   @include card();
188 | }
189 | </style>


--------------------------------------------------------------------------------
/.vuepress/components/DemoInteractDraggableWithEventBus.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <section class="draggable-container">
  4 |       <Vue2InteractDraggable
  5 |         v-if="isShowing"
  6 |         class="card"
  7 |         @draggedDown="draggedDown"
  8 |         @draggedLeft="draggedLeft"
  9 |         @draggedRight="draggedRight"
 10 |         @draggedUp="draggedUp"
 11 |         :interact-event-bus-events="$options.static.interactEventBusEvents"
 12 |       >
 13 |         <div>
 14 |           <h3 class="card__title">Drag me!</h3>
 15 |         </div>
 16 |       </Vue2InteractDraggable>
 17 |     </section>
 18 |     <section class="buttons">
 19 |       <BaseButton
 20 |         class="event-button"
 21 |         @click="dragLeft"
 22 |         label="⇦"
 23 |       />
 24 | 
 25 |       <BaseButton
 26 |         class="event-button"
 27 |         @click="dragDown"
 28 |         label="⇩"
 29 |       />
 30 | 
 31 |       <BaseButton
 32 |         class="event-button"
 33 |         @click="dragRight"
 34 |         label="⇨"
 35 |       />
 36 |         
 37 |       <BaseButton
 38 |         class="event-button"
 39 |         @click="dragUp"
 40 |         label="⇧"
 41 |       />
 42 |     </section>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import InteractEventBus from '../../src/interact-event-bus.js';
 48 | 
 49 | export default {
 50 |   static: {
 51 |     interactEventBusEvents: {
 52 |       draggedDown: 'INTERACT_DRAGGED_DOWN',
 53 |       draggedLeft: 'INTERACT_DRAGGED_LEFT',
 54 |       draggedRight: 'INTERACT_DRAGGED_RIGHT',
 55 |       draggedUp: 'INTERACT_DRAGGED_UP',
 56 |     },
 57 |   },
 58 | 
 59 |   data() {
 60 |     return { 
 61 |       isShowing: true,
 62 |     }
 63 |   },
 64 | 
 65 |   methods: {
 66 |     draggedDown() {
 67 |       console.log('dragged down!')
 68 |       this.hideCard();
 69 |     },
 70 | 
 71 |     draggedLeft() {
 72 |       console.log('dragged left!')
 73 |       this.hideCard();
 74 |     },
 75 | 
 76 |     draggedRight() {
 77 |       console.log('dragged right!')
 78 |       this.hideCard();
 79 |     },
 80 | 
 81 |     draggedUp() {
 82 |       console.log('dragged down!')
 83 |       this.hideCard();
 84 |     },
 85 | 
 86 |     hideCard() {
 87 |       setTimeout(() => {
 88 |         this.isShowing = false;
 89 |       }, 200);
 90 |       setTimeout(() => {
 91 |         this.isShowing = true;
 92 |       }, 1000);
 93 |     },
 94 | 
 95 |     dragDown() {
 96 |       InteractEventBus.$emit(this.$options.static.interactEventBusEvents.draggedDown);
 97 |     },
 98 | 
 99 |     dragLeft() {
100 |       InteractEventBus.$emit(this.$options.static.interactEventBusEvents.draggedLeft);
101 |     },
102 | 
103 |     dragRight() {
104 |       InteractEventBus.$emit(this.$options.static.interactEventBusEvents.draggedRight);
105 |     },
106 | 
107 |     dragUp() {
108 |       InteractEventBus.$emit(this.$options.static.interactEventBusEvents.draggedUp);
109 |     },
110 |   }
111 | };
112 | </script>
113 | 
114 | <style lang="scss" scoped>
115 | @import "./styles/index.scss";
116 | 
117 | $cardsWidth: 200px;
118 | $fs-card-title: 1.125em;
119 | 
120 | .container {
121 |   margin-top: 100px;
122 | }
123 | 
124 | .draggable-container {
125 |   @include sizing($cardsWidth);
126 | 
127 |   display: flex;
128 |   margin: auto;
129 | }
130 | 
131 | .card {
132 |   @include card();
133 | }
134 | 
135 | .buttons {
136 |   display: flex;
137 |   justify-content: center;
138 |   margin-top: 50px;
139 | }
140 | 
141 | .event-button {
142 |   margin: 0 20px;
143 | }
144 | </style>


--------------------------------------------------------------------------------
/.vuepress/components/styles/animations.scss:
--------------------------------------------------------------------------------
 1 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 2 | 
 3 | @keyframes scaleUpAndDown {
 4 |   0% {
 5 |     opacity: 1;
 6 |     transform: scale(1);
 7 |   }
 8 | 
 9 |   60% {
10 |     opacity: 0;
11 |     transform: scale(1.4);
12 |   }
13 | 
14 |   61% {
15 |     opacity: 0;
16 |     transform: scale(1);
17 |   }
18 | 
19 |   100% {
20 |     opacity: 1;
21 |     transform: scale(1);
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/.vuepress/components/styles/colors.scss:
--------------------------------------------------------------------------------
1 | $c-white: #fff;
2 | $c-black: #000;
3 | $c-red-50: #73345e;
4 | $c-red-25: #432958;
5 | $c-navy: #0f0e3d;
6 | $c-text: #8285a7;
7 | $primary-gradient-start: #35495e;
8 | $primary-gradient-end: #42b883;
9 | 


--------------------------------------------------------------------------------
/.vuepress/components/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import "../styles/mixins.scss";
2 | @import "../styles/colors.scss";
3 | @import "../styles/typography.scss";
4 | @import "../styles/animations.scss";
5 | 


--------------------------------------------------------------------------------
/.vuepress/components/styles/mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin _position($position, $args) {
 2 |   @each $dir in top, left, bottom, right {
 3 |     $i: index($args, $dir);
 4 | 
 5 |     @if $i {
 6 |       #{$dir}: nth($args, $i + 1);
 7 |     }
 8 |   }
 9 | 
10 |   position: $position;
11 | }
12 | 
13 | @mixin absolute($args) {
14 |   @include _position(absolute, $args);
15 | }
16 | 
17 | @mixin card() {
18 |   @include absolute(0);
19 |   @include sizing(200px);
20 |   @include flex-center();
21 | 
22 |   display: flex;
23 |   height: 100vw;
24 |   max-height: 200px;
25 |   margin: auto;
26 |   border-radius: 15px;
27 |   box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.05);
28 |   font-size: $fs-h2;
29 |   font-weight: $fw-bold;
30 |   color: $c-white;
31 |   background-image: linear-gradient(
32 |     -180deg,
33 |     $primary-gradient-start 2%,
34 |     $primary-gradient-end 100%
35 |   );
36 |   opacity: 1;
37 |   transform-origin: 50%, 100%;
38 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
39 |   user-select: none;
40 |   pointer-events: none;
41 |   will-change: transform, opacity;
42 |   pointer-events: auto;
43 | 
44 |   &__title {
45 |     margin: 0 0 15px;
46 |     font-size: $fs-card-title;
47 |   }
48 | }
49 | 
50 | @mixin sizing($args, $prefix: "") {
51 |   $width: if(length($args) == 2, nth($args, 1), $args);
52 |   $height: if(length($args) == 2, nth($args, 2), $args);
53 | 
54 |   #{$prefix}width: $width;
55 |   #{$prefix}height: $height;
56 | }
57 | 
58 | @mixin flex-center() {
59 |   display: flex;
60 |   align-items: center;
61 |   justify-content: center;
62 | }
63 | 
64 | @mixin circle($args) {
65 |   @include sizing($args);
66 | 
67 |   border-radius: 50%;
68 | }
69 | 
70 | @mixin after() {
71 |   &::after {
72 |     content: "";
73 | 
74 |     @content;
75 |   }
76 | }
77 | 
78 | @mixin before() {
79 |   &::before {
80 |     content: '';
81 | 
82 |     @content;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/.vuepress/components/styles/typography.scss:
--------------------------------------------------------------------------------
1 | $fs-h2: rem(24px);
2 | $fw-bold: 700;
3 | 


--------------------------------------------------------------------------------
/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'vue2-interact',
 3 |   themeConfig:{
 4 |     sidebar: [
 5 |         {
 6 |             collapsable: false,
 7 |             children: [
 8 |               '/'
 9 |             ]
10 |         },
11 |         {
12 |             collapsable: false,
13 |             children: [
14 |               '/docs/vue2InteractDraggable/'
15 |             ]
16 |           }
17 |         ]
18 | }
19 | }
20 | 


--------------------------------------------------------------------------------
/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
1 | import Vue2InteractDraggable from "../src/components/Vue2InteractDraggable";
2 | 
3 | export default ({
4 |   Vue,
5 | }) => {
6 |   Vue.component('Vue2InteractDraggable', Vue2InteractDraggable)
7 | }
8 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Contributions are **welcome** and will be fully **credited**.
 4 | 
 5 | We accept contributions via Pull Requests on [Github](https://github.com/mateuszRybczonek/vue2-interact).
 6 | 
 7 | 
 8 | ## Pull Requests
 9 | 
10 | - **Keep the same style** - eslint will automatically be ran before committing
11 | 
12 | - **Tip** to pass lint tests easier use the `npm run lint:fix` command
13 | 
14 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests.
15 | 
16 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
17 | 
18 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
19 | 
20 | - **Create feature branches** - Don't ask us to pull from your master branch.
21 | 
22 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
23 | 
24 | - **Send coherent history** - Make sure your commits message means something
25 | 
26 | 
27 | **Happy coding**!
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Mateusz Rybczonek
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-interact
 2 | 
 3 | > [interact.js](http://interactjs.io/) wrapper component for Vue.js apps
 4 | 
 5 | ## Installation
 6 | 
 7 | ```bash
 8 | yarn add vue2-interact
 9 | ```
10 | 
11 | ## Documentation
12 | > [Go to docs and demo](https://vue2-interact.netlify.com/)
13 | 
14 | ## Usage
15 | 
16 | ```js
17 | import Vue from 'vue'
18 | import { Vue2InteractDraggable } from 'vue2-interact'
19 | 
20 | export default {
21 |   components: {
22 |     Vue2InteractDraggable
23 |   }
24 | }
25 | ```
26 | 
27 | ## Development
28 | 
29 | ### Launch visual tests
30 | 
31 | ```bash
32 | yarn watch
33 | ```
34 | 
35 | ### Build
36 | 
37 | Bundle the js and css of to the `dist` folder:
38 | 
39 | ```bash
40 | yarn build
41 | ```
42 | 
43 | ## Publishing
44 | 
45 | The `prepare` hook will ensure dist files are created before publishing. This
46 | way you don't need to commit them in your repository.
47 | 
48 | ```bash
49 | # Bump the version first
50 | # It'll also commit it and create a tag
51 | npm version
52 | # Push the bumped package and tags
53 | git push --follow-tags
54 | # Ship it 🚀
55 | npm publish
56 | ```
57 | 
58 | ## License
59 | 
60 | [MIT](http://opensource.org/licenses/MIT)
61 | 


--------------------------------------------------------------------------------
/docs/vue2InteractDraggable/README.md:
--------------------------------------------------------------------------------
  1 | # vue2-interact-draggable
  2 | 
  3 | > interact.js draggable wrapper component for Vue.js
  4 | 
  5 | ## Basic usage
  6 | 
  7 | ### 1. Import component
  8 | ```js
  9 | import Vue from 'vue'
 10 | import { Vue2InteractDraggable } from 'vue2-interact'
 11 | 
 12 | export default {
 13 |   components: {
 14 |     Vue2InteractDraggable
 15 |   }
 16 | }
 17 | ```
 18 | 
 19 | ### 2. Use component
 20 | ```html
 21 | <Vue2InteractDraggable
 22 |   @draggedRight="draggedRight"
 23 |   :interact-max-rotation="15"
 24 |   :interact-out-of-sight-x-coordinate="500"
 25 |   :interact-x-threshold="200"
 26 | >
 27 |   <div>
 28 |     <h3>Drag me!</h3>
 29 |   </div>
 30 | </Vue2InteractDraggable>
 31 | ```
 32 | 
 33 | ### 3. Demo
 34 | 
 35 | <DemoInteractDraggable />
 36 | 
 37 | [Sandbox demo](https://codesandbox.io/s/n34kv9n2wp)
 38 | 
 39 | ## Event bus usage
 40 | Using event bus allows us to fire the `Vue2InteractDraggable` component methods from the outside of the component. 
 41 | 
 42 | The component accepts `interact-event-bus-events` property tells `Vue2InteractDraggable` component to listen to those events and fire appropriate method when needed.
 43 | 
 44 | Available events:
 45 |   - `draggedDown`
 46 |   - `draggedLeft`
 47 |   - `draggedRight`
 48 |   - `draggedUp`
 49 | 
 50 | By emitting appropriate event in the event bus we can trigger the method from anywhere in the application.
 51 | 
 52 | ### 1. Import component and event bus
 53 | ```js
 54 | import Vue from 'vue'
 55 | import { Vue2InteractDraggable, InteractEventBus } from 'vue2-interact'
 56 | 
 57 | export default {
 58 |   components: {
 59 |     Vue2InteractDraggable
 60 |   }
 61 | }
 62 | ```
 63 | 
 64 | ### 2. Use component
 65 | ```html
 66 | <Vue2InteractDraggable
 67 |   @draggedLeft="draggedLeft"
 68 |   :interact-event-bus-events="interactEventBusEvents"
 69 |   v-if="isShowing"
 70 |   class="card isCurrent"
 71 | >
 72 |   <div>
 73 |     <h3 class="cardTitle">Drag me!</h3>
 74 |   </div>
 75 | </Vue2InteractDraggable>
 76 | 
 77 | <BaseButton @click="dragLeft" label="⇦" />
 78 | ```
 79 | 
 80 | ```js
 81 | <script>
 82 | const INTERACT_DRAGGED_LEFT = 'INTERACT_DRAGGED_LEFT';
 83 | 
 84 | export default {
 85 |   data() {
 86 |     return {
 87 |       isShowing: true,
 88 |       interactEventBusEvents: {
 89 |         draggedLeft: INTERACT_DRAGGED_LEFT,
 90 |       },
 91 |     };
 92 |   },
 93 | 
 94 |   methods: {
 95 |     dragLeft() {
 96 |       InteractEventBus.$emit(INTERACT_DRAGGED_LEFT);
 97 |     },
 98 |   }
 99 | };
100 | </script>
101 | ```
102 | 
103 | ### 3. Demo
104 | 
105 | <DemoInteractDraggableWithEventBus />
106 | 
107 | [Sandbox demo](https://codesandbox.io/s/5wo373kqwk)
108 | 
109 | ## Listeners
110 | 
111 | ### draggedRight
112 | 
113 | Function fired when element is dragged right from its original position by distance specified in `interact-x-threshold` property.
114 | 
115 | ### draggedLeft
116 | 
117 | Function fired when element is dragged left from its original position by distance specified in `interact-x-threshold` property.
118 | 
119 | ### draggedUp
120 | 
121 | Function fired when element is dragged up from its original position by distance specified in `interact-y-threshold` property.
122 | 
123 | ### draggedDown
124 | 
125 | Function fired when element is dragged down from its original position by distance specified in `interact-y-threshold` property.
126 | 
127 | ## Properties
128 | 
129 | ### interact-block
130 | 
131 | - type: Boolean
132 | - default: false
133 | 
134 | - available types:
135 |   - `interact-block-drag-down`
136 |   - `interact-block-drag-up`
137 |   - `interact-block-drag-left`
138 |   - `interact-block-drag-right`
139 | 
140 | Prevent an event from being fired when the element is dragged in certain direction.
141 | 
142 | ### interact-max-rotation
143 | 
144 | - type: Number
145 | - default: 0
146 | 
147 | Specify maximum rotation in degrees to which the element is rotated during horizontal drag.
148 | 
149 | ### interact-lock
150 | 
151 | - type: Boolean
152 | - default: false
153 | 
154 | - available types:
155 |   - `interact-lock-x-axis`
156 |   - `interact-lock-y-axis`
157 |   - `interact-lock-swipe-down`
158 |   - `interact-lock-swipe-up`
159 |   - `interact-lock-swipe-left`
160 |   - `interact-lock-swipe-right`
161 | 
162 | Prevent swiping in specified axis or direction.
163 | 
164 | ### interact-x-threshold
165 | 
166 | - type: Number
167 | - default: 200
168 | 
169 | Horizontal (X) distance to which the element must be dragged to fire the appropriate event.
170 | 
171 | ### interact-y-threshold
172 | 
173 | - type: Number
174 | - default: 300
175 | 
176 | Vertical (Y) distance to which the element must be dragged to fire the appropriate event.
177 | 
178 | ### interact-out-of-sight-x-coordinate
179 | 
180 | - type: Number
181 | - default: 500
182 | 
183 | Horizontal (X) distance to which the element will be moved when horizontal (X) threshold is met at the end of drag.
184 | 
185 | ### interact-out-of-sight-y-coordinate
186 | 
187 | - type: Number
188 | - default: 1000
189 | 
190 | Vertical (Y) distance to which the element will be moved when vertical (Y) threshold is met at the end of drag.
191 | 
192 | ### interactEventBusEvents
193 | 
194 | - type: Object
195 | - default: {}
196 | 
197 | Allows to fire the `Vue2InteractDraggable` component methods from the outside of the component.
198 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-interact",
 3 |   "version": "0.0.3",
 4 |   "description": "Interact wrapper component for Vue.js apps",
 5 |   "author": "Mateusz Rybczonek <m.rybczonek@gmail.com>",
 6 |   "main": "dist/vue2-interact.common.js",
 7 |   "module": "dist/vue2-interact.esm.js",
 8 |   "browser": "dist/vue2-interact.js",
 9 |   "unpkg": "dist/vue2-interact.js",
10 |   "style": "dist/vue2-interact.css",
11 |   "files": [
12 |     "dist",
13 |     "src"
14 |   ],
15 |   "scripts": {
16 |     "build": "NODE_ENV=production rollup -c",
17 |     "watch": "NODE_ENV=dev rollup -c -w",
18 |     "lint": "yarn lint:js && yarn lint:css",
19 |     "lint:js": "eslint --ext .js,.vue src",
20 |     "lint:js:fix": "yarn lint:js --fix",
21 |     "lint:css": "stylelint src/**/*.{vue,css}",
22 |     "pretest": "yarn lint",
23 |     "prepare": "yarn build",
24 |     "docs:dev": "vuepress dev",
25 |     "docs:build": "vuepress build"
26 |   },
27 |   "dependencies": {
28 |     "interact.js": "^1.2.8"
29 |   },
30 |   "devDependencies": {
31 |     "babel-core": "^6.26.3",
32 |     "babel-eslint": "^8.2.3",
33 |     "babel-plugin-external-helpers": "^6.22.0",
34 |     "babel-plugin-transform-async-to-generator": "^6.24.1",
35 |     "babel-plugin-transform-object-rest-spread": "^6.23.0",
36 |     "babel-plugin-transform-runtime": "^6.23.0",
37 |     "babel-preset-env": "^1.7.0",
38 |     "clean-css": "^4.1.11",
39 |     "eslint": "^3.19.0",
40 |     "eslint-plugin-vue": "^4.5.0",
41 |     "node-sass": "^4.10.0",
42 |     "rollup": "^0.58.2",
43 |     "rollup-plugin-babel": "^3.0.6",
44 |     "rollup-plugin-commonjs": "^9.1.3",
45 |     "rollup-plugin-node-resolve": "^3.3.0",
46 |     "rollup-plugin-uglify": "^3.0.0",
47 |     "rollup-plugin-vue": "^2.3.0",
48 |     "sass-loader": "^7.1.0",
49 |     "stylelint": "^7.10.0",
50 |     "stylelint-config-standard": "^16.0.0",
51 |     "stylelint-processor-arbitrary-tags": "^0.1.0",
52 |     "vue": "^2.5.17",
53 |     "vuepress": "^0.14.4"
54 |   },
55 |   "peerDependencies": {
56 |     "vue": "^2.5.17"
57 |   },
58 |   "postcss": {
59 |     "plugins": {
60 |       "autoprefixer": {}
61 |     }
62 |   },
63 |   "repository": {
64 |     "type": "git",
65 |     "url": "git+https://github.com/mateuszRybczonek/vue2-interact.git"
66 |   },
67 |   "bugs": {
68 |     "url": "https://github.com/mateuszRybczonek/vue2-interact/issues"
69 |   },
70 |   "homepage": "https://github.com/mateuszRybczonek/vue2-interact#readme",
71 |   "license": "MIT",
72 |   "browserslist": [
73 |     "last 2 versions"
74 |   ]
75 | }
76 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve'
 2 | import commonjs from 'rollup-plugin-commonjs'
 3 | import babel from 'rollup-plugin-babel'
 4 | import uglify from 'rollup-plugin-uglify'
 5 | import vue from 'rollup-plugin-vue'
 6 | import CleanCSS from 'clean-css';
 7 | import fs from 'fs';
 8 | 
 9 | const pkg = require('./package.json')
10 | 
11 | const input = 'src/index.js';
12 | 
13 | export default [
14 |   {
15 |     input,
16 |     output: {
17 |       file: pkg.browser,
18 |       format: 'umd',
19 |       name: 'Vue2Interact',
20 |       sourcemap: process.env.NODE_ENV === 'dev'
21 |     },
22 |     plugins: [
23 |       resolve(),
24 |       vue({
25 |         compileTemplate: true,
26 |         css: false
27 |       }),
28 |       commonjs(),
29 |       babel({
30 |         exclude: ['node_modules/**'],
31 |         runtimeHelpers: true,
32 |       }),
33 |       uglify()
34 |     ]
35 |   },
36 |   {
37 |     input,
38 |     external: Object.keys(pkg.dependencies || {}),
39 |     output: [
40 |       {
41 |         file: pkg.main,
42 |         format: 'cjs',
43 |         sourcemap: process.env.NODE_ENV === 'dev'
44 |       },
45 |       {
46 |         file: pkg.module,
47 |         format: 'es',
48 |         sourcemap: process.env.NODE_ENV === 'dev'
49 |       }
50 |     ],
51 |     plugins: [
52 |       vue({
53 |         compileTemplate: true,
54 |         css(styles) {
55 |           fs.writeFileSync(pkg.style, new CleanCSS().minify(styles).styles)
56 |         }
57 |       }),
58 |       babel({
59 |         runtimeHelpers: true,
60 |         exclude: ['node_modules/**']
61 |       }),
62 |     ]
63 |   }
64 | ]
65 | 


--------------------------------------------------------------------------------
/src/components/Vue2InteractDraggable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     ref="interactElement"
  4 |     :class="{ 'vue-interact-animated': interactIsAnimating }"
  5 |     :style="{
  6 |       transform: interactTransformString,
  7 |       transition: interactTransitionString
  8 |     }"
  9 |   >
 10 |     <slot />
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import interact from 'interact.js';
 16 | import InteractEventBus from '../interact-event-bus';
 17 | 
 18 | export default {
 19 |   name: 'Vue2InteractDraggable',
 20 | 
 21 |   props: {
 22 |     interactBlockDragDown: {
 23 |       type: Boolean,
 24 |       default: false,
 25 |     },
 26 |     interactBlockDragLeft: {
 27 |       type: Boolean,
 28 |       default: false,
 29 |     },
 30 |     interactBlockDragRight: {
 31 |       type: Boolean,
 32 |       default: false,
 33 |     },
 34 |     interactBlockDragUp: {
 35 |       type: Boolean,
 36 |       default: false,
 37 |     },
 38 |     interactEventBusEvents: {
 39 |       type: Object,
 40 |       default: () => {},
 41 |     },
 42 |     interactMaxRotation: {
 43 |       type: Number,
 44 |       default: 0,
 45 |     },
 46 |     interactLockXAxis: {
 47 |       type: Boolean,
 48 |       default: false,
 49 |     },
 50 |     interactLockYAxis: {
 51 |       type: Boolean,
 52 |       default: false,
 53 |     },
 54 |     interactLockSwipeDown: {
 55 |       type: Boolean,
 56 |       default: false,
 57 |     },
 58 |     interactLockSwipeLeft: {
 59 |       type: Boolean,
 60 |       default: false,
 61 |     },
 62 |     interactLockSwipeRight: {
 63 |       type: Boolean,
 64 |       default: false,
 65 |     },
 66 |     interactLockSwipeUp: {
 67 |       type: Boolean,
 68 |       default: false,
 69 |     },
 70 |     interactOutOfSightXCoordinate: {
 71 |       type: Number,
 72 |       default: 500,
 73 |     },
 74 |     interactOutOfSightYCoordinate: {
 75 |       type: Number,
 76 |       default: 1000,
 77 |     },
 78 |     interactXThreshold: {
 79 |       type: Number,
 80 |       default: 200,
 81 |     },
 82 |     interactYThreshold: {
 83 |       type: Number,
 84 |       default: 300,
 85 |     },
 86 |   },
 87 | 
 88 |   data() {
 89 |     return {
 90 |       interactIsAnimating: true,
 91 |       interactDragged: null,
 92 |       interactPosition: {
 93 |         x: 0,
 94 |         y: 0,
 95 |         rotation: 0,
 96 |       },
 97 |     };
 98 |   },
 99 | 
100 |   computed: {
101 |     interactTransformString() {
102 |       if (!this.interactIsAnimating || this.interactDragged) {
103 |         const { x, y, rotation } = this.interactPosition;
104 |         return `translate3D(${x}px, ${y}px, 0) rotate(${rotation}deg)`;
105 |       }
106 | 
107 |       return null;
108 |     },
109 | 
110 |     interactTransitionString() {
111 |       if (this.interactIsAnimating) return 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
112 | 
113 |       return null;
114 |     },
115 |   },
116 | 
117 |   watch: {
118 |     interactEventBusEvents(val) {
119 |       this.interactSetEventBusEvents();
120 |     },
121 |   },
122 | 
123 |   mounted() {
124 |     this.interactSetEventBusEvents();
125 | 
126 |     const element = this.$refs.interactElement;
127 | 
128 |     interact(element).draggable({
129 |       onstart: () => {
130 |         this.interactIsAnimating = false;
131 |       },
132 | 
133 |       onmove: (event) => {
134 |         let x = 0;
135 |         let y = 0;
136 | 
137 |         if (this.interactLockSwipeLeft && event.dx < 0) x = 0;
138 |         else if (this.interactLockSwipeRight && event.dx > 0) x = 0;
139 |         else x = this.interactLockXAxis ? 0 : (this.interactPosition.x || 0) + event.dx;
140 | 
141 |         if (this.interactLockSwipeUp && event.dy < 0) y = 0;
142 |         else if (this.interactLockSwipeDown && event.dy > 0) y = 0;
143 |         else y = this.interactLockYAxis ? 0 : (this.interactPosition.y || 0) + event.dy;
144 | 
145 |         let rotation = this.interactMaxRotation * (x / this.interactXThreshold);
146 | 
147 |         if (rotation > this.interactMaxRotation) rotation = this.interactMaxRotation;
148 |         else if (rotation < -this.interactMaxRotation) rotation = -this.interactMaxRotation;
149 | 
150 |         this.interactSetPosition({ x, y, rotation });
151 |       },
152 | 
153 |       onend: () => {
154 |         const { x: cardPositionX, y: cardPositionY } = this.interactPosition;
155 |         const { interactXThreshold, interactYThreshold } = this;
156 |         this.interactIsAnimating = true;
157 | 
158 |         if (cardPositionX > interactXThreshold) this.interactDraggedRight();
159 |         else if (cardPositionX < -interactXThreshold) this.interactDraggedLeft();
160 |         else if (cardPositionY > interactYThreshold) this.interactDraggedDown();
161 |         else if (cardPositionY < -interactYThreshold) this.interactDraggedUp();
162 |         else this.interactResetCardPosition();
163 |       },
164 |     });
165 |   },
166 | 
167 |   beforeDestroy() {
168 |     interact(this.$refs.interactElement).unset();
169 |     this.interactUnsetEventBusEvents();
170 |   },
171 | 
172 |   methods: {
173 |     interactDraggedDown() {
174 |       if (this.interactBlockDragDown) {
175 |         this.interactResetCardPosition();
176 |         return;
177 |       }
178 |       this.interactUnsetElement();
179 |       this.interactSetPosition({ y: this.interactOutOfSightYCoordinate });
180 |       this.$emit('draggedDown');
181 |     },
182 | 
183 |     interactDraggedLeft() {
184 |       if (this.interactBlockDragLeft) {
185 |         this.interactResetCardPosition();
186 |         return;
187 |       }
188 |       this.interactUnsetElement();
189 |       this.interactSetPosition({
190 |         x: -this.interactOutOfSightXCoordinate,
191 |         rotation: -this.interactMaxRotation,
192 |       });
193 |       this.$emit('draggedLeft');
194 |     },
195 | 
196 |     interactDraggedRight() {
197 |       if (this.interactBlockDragRight) {
198 |         this.interactResetCardPosition();
199 |         return;
200 |       }
201 |       this.interactUnsetElement();
202 |       this.interactSetPosition({
203 |         x: this.interactOutOfSightXCoordinate,
204 |         rotation: this.interactMaxRotation,
205 |       });
206 |       this.$emit('draggedRight');
207 |     },
208 | 
209 |     interactDraggedUp() {
210 |       if (this.interactBlockDragUp) {
211 |         this.interactResetCardPosition();
212 |         return;
213 |       }
214 |       this.interactUnsetElement();
215 |       this.interactSetPosition({ y: -this.interactOutOfSightYCoordinate });
216 |       this.$emit('draggedUp');
217 |     },
218 | 
219 |     interactSetEventBusEvents() {
220 |       if (this.interactEventBusEvents) {
221 |         if (this.interactEventBusEvents.draggedDown) {
222 |           InteractEventBus.$on(this.interactEventBusEvents.draggedDown, this.interactDraggedDown);
223 |         };
224 | 
225 |         if (this.interactEventBusEvents.draggedLeft) {
226 |           InteractEventBus.$on(this.interactEventBusEvents.draggedLeft, this.interactDraggedLeft);
227 |         };
228 | 
229 |         if (this.interactEventBusEvents.draggedRight) {
230 |           InteractEventBus.$on(this.interactEventBusEvents.draggedRight, this.interactDraggedRight);
231 |         };
232 | 
233 |         if (this.interactEventBusEvents.draggedUp) {
234 |           InteractEventBus.$on(this.interactEventBusEvents.draggedUp, this.interactDraggedUp);
235 |         };
236 |       }
237 |     },
238 | 
239 |     interactSetPosition(coordinates) {
240 |       const {
241 |         x = 0,
242 |         y = 0,
243 |         rotation = 0
244 |       } = coordinates;
245 | 
246 |       this.interactPosition = {x, y, rotation };
247 |     },
248 | 
249 |     interactUnsetElement() {
250 |       interact(this.$refs.interactElement).unset();
251 |       this.interactDragged = true;
252 |     },
253 | 
254 |     interactUnsetEventBusEvents() {
255 |       if (this.interactEventBusEvents) {
256 |         if (this.interactEventBusEvents.draggedDown) {
257 |           InteractEventBus.$off(this.interactEventBusEvents.draggedDown, this.draggedDown);
258 |         };
259 | 
260 |         if (this.interactEventBusEvents.draggedLeft) {
261 |           InteractEventBus.$off(this.interactEventBusEvents.draggedLeft, this.draggedLeft);
262 |         };
263 | 
264 |         if (this.interactEventBusEvents.draggedRight) {
265 |           InteractEventBus.$off(this.interactEventBusEvents.draggedRight, this.draggedRight);
266 |         };
267 | 
268 |         if (this.interactEventBusEvents.draggedUp) {
269 |           InteractEventBus.$off(this.interactEventBusEvents.draggedUp, this.draggedUp);
270 |         };
271 |       }
272 |     },
273 | 
274 |     interactResetCardPosition() {
275 |       this.interactSetPosition({ x: 0, y: 0, rotation: 0 });
276 |     }
277 |   },
278 | };
279 | </script>
280 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue2InteractDraggable from './components/Vue2InteractDraggable.vue'
 2 | import InteractEventBus from './interact-event-bus.js';
 3 | 
 4 | const plugin = {
 5 |   install (Vue) {
 6 |     Vue.component('Vue2InteractDraggable', Vue2InteractDraggable)
 7 |   }
 8 | }
 9 | 
10 | export { Vue2InteractDraggable };
11 | export { InteractEventBus };
12 | 
13 | // Auto-install
14 | let GlobalVue = null
15 | if (typeof window !== 'undefined') {
16 |   GlobalVue = window.Vue
17 | } else if (typeof global !== 'undefined') {
18 |   GlobalVue = global.Vue
19 | }
20 | if (GlobalVue) {
21 |   GlobalVue.use(plugin)
22 | }
23 | 


--------------------------------------------------------------------------------
/src/interact-event-bus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | 
3 | export default new Vue();
4 | 


--------------------------------------------------------------------------------