JSFiddle - React, Tailwind, and code Playground

by jikkai

HTML

<script src="//unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>

<div id="app">
  <section id="drag">
    <div v-for="fruit in fruits" v-draggable.fruits="fruit">
      {{ fruit }}
    </div>
  </section>

  <section id="drop" v-droppable.fruits="send">
    <div v-for="item in home">
      {{ item }}
    </div>
  </section>
</div>

SCSS

#app > section {
  min-height: 120px;
  margin-bottom: 24px;
  background: #FFF;
  border: 1px dashed #888;
}

JavaScript

Vue.use(Vue2Dnd)

new Vue({
  el: '#app',
  data: {
    fruits: ['apple', 'peach', 'pear'],
    home: []
  },
  methods: {
    send: function ($ev) {
    	console.log($ev)
    	this.home.push(JSON.parse($ev))
    }
  }
})