koca / vue-use-gesture Goto Github PK

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> 
     <dragcard/>
     <dragcard/>  
     <dragcard/>  
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import dragcard from './components/use-drag.vue'


export default {
  name: 'App',
  components: {
    HelloWorld,
    dragcard
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
    <div id="drag-card" ref="refEl" :style="transformStyle">
    <!-- <div id="drag-card" ref="refEl" :style="transformStyle" v-on="bind()"> -->
        <div class="area w-20 h-20 bg-blue-300 rounded-2xl"> </div>
    </div>
</template>


<script>
import { useDrag, useSpring } from 'vue-use-gesture'
import { defineComponent, computed, ref } from '@vue/composition-api'


export default defineComponent({
  setup() {
    const refEl = ref()
    const transform = useSpring({ x: 0, y: 0 })

    // bind doesn't work for vue 2 bec of event names we can change listener names using vue-demi
    const bind = useDrag(
      ({ down, movement: [mx, my] }) => {
        transform.x = down ? mx : 0
        transform.y = down ? my : 0
      }  ,
       { domTarget: refEl }
    )
    console.log(bind())

    const transformStyle = computed(() => {
      const style = { transform: `translate3d(${transform.x}px,${transform.y}px,0)` }
      return style
    })

    return {
      refEl,
      bind,
      transformStyle,
    }
  },
})
</script>

<style>
.area {
  touch-action: none;
  cursor: -webkit-grab;
  cursor: grab;
}
</style>