<template>
  <div>
		<h2>Basic Droppable</h2>
		<div class="dragitem" v-Draggable>
			<p style="text-align:center">Drag me</p>
		</div>
		<div class="droparea" v-Droppable ="dropOpts" :class="{'over':isover,'dropped':dropped}">
			<p style="text-align:center">Drop here</p>
		</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dropped: false,
      isover: false,
      dropOpts: {
        dragEnter: () => {
          this.isover = true;
        },
        dragLeave: () => {
          this.isover = false;
        },
        drop: () => {
          this.dropped = true;
        }
      }
    };
  }
};
</script>
<style>
.dragitem {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background: #fafafa;
  position: absolute;
  top: 100px;
  z-index: 2;
}
.droparea {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  position: absolute;
  left: 200px;
  top: 100px;
  z-index: 1;
}
.over {
  background: #fbec88;
}
.dropped {
  background: #aaccff;
}
</style>