VueDragDrop minimal example

by larsi

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-drag-drop"></script>
<div id="app">
  <drag class="drag" :transfer-data="{ draggable }">{{ draggable }}</drag>
  <drop class="drop" @drop="handleDrop">Dropzone</drop>
</div>

CSS

.drag,
.drop {
  font-family: sans-serif;
  display: inline-block;
  border-radius: 10px;
  background: #111;
  position: relative;
  padding: 30px;
  text-align: center;
  vertical-align: top;
}

.drag {
  color: #fff;
  cursor: move;
  background: #777;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
}

.drop {
  background: #eee;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
}

JavaScript

var demo = new Vue({
  el: '#app',
  data: () => ({ draggable: 'Drag Me'}),
  methods: {
    handleDrop(data, event) {
      alert(`You dropped with data: ${JSON.stringify(data)}`);
    },
  },
});