example.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Vue.js Drag And Drop</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <style>
    /* Prevent the text contents of draggable elements from being selectable. */
    [draggable] {
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    li {
      color: black;
    }
    .dragging {
      opacity: 0.8;
      color: #6894D1;
    }
    .drag-over {
      outline: 1px solid red;
    }
    .drag-enter {
      color: #C93742;
    }
  </style>
</head>
<body>
  <div class="container" id="app">
    <h3>Some Tasks</h3>
    <ul>
      <li v-for="task in tasks" v-bind:id="task.id"
      v-drag-and-drop
      v-on:drag-start="handleDragStart"
      v-on:drag-over="handleDragOver"
      v-on:drag-enter="handleDragEnter"
      v-on:drag-leave="handleDragLeave"
      v-on:drag-end="handleDragEnd"
      v-on:drop="handleDrop"
      v-on:drag="handleDrag"
      >
      <input type="checkbox" name="completed[]" value="1" v-bind:checked="task.completed">
      <strong v-text="task.title"></strong>
    </li>
  </ul>
  <pre v-text="loggedEvent"></pre>
  <h3>Some Images</h3>
  <div class="image" v-for="(image, index) in images" v-drag-and-drop v-on:drag="handleDrag" v-on:drop="handleImageDrop">
    <img src="" v-bind:src="image.src" v-bind:id="index" v-bind:title="image.name" align="left">
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="vue.drag-and-drop.js"></script>
<script>
  /* globals Vue */
  new Vue({
    el: '#app',
    data: {
      currentlyDragging: null,
      loggedEvent: '',
      tasks: [{id:96,title:'Task 8',completed:false},{id:12,title:'Task 1',completed:true},{id:24,title:'Task 2',completed:false},{id:36,title:'Task 3',completed:true},{id:48,title:'Task 4',completed:false},{id:60,title:'Task 5',completed:true},{id:72,title:'Task 6',completed:false},{id:84,title:'Task 7',completed:true},{id:0,title:'Task 0',completed:false},{id:108,title:'Task 9',completed:true}],
      images: [{name:'Image 1',src:'http://placehold.it/100/000000/ffffff'},{name:'Image 2',src:'http://placehold.it/100/C93742/ffffff'},{name:'Image 3',src:'http://placehold.it/100/6894D1/ffffff'}]
    },
    methods: {
      handleDragStart: function (e) {
        console.log('handleDragStart', e);
        this.loggedEvent = 'handleDragStart';
      },
      handleDragOver: function (e) {
        console.log('handleDragOver', e);
        this.loggedEvent = 'handleDragOver';
      },
      handleDragEnter: function (e) {
        console.log('handleDragEnter', e);
        this.loggedEvent = 'handleDragEnter';
      },
      handleDragLeave: function (e) {
        console.log('handleDragLeave', e);
        this.loggedEvent = 'handleDragLeave';
      },
      handleDragEnd: function (e) {
        console.log('handleDragEnd', e);
        this.loggedEvent = 'handleDragEnd';
      },
      handleDrop: function (e) {
        console.log('handleDrop', this.currentlyDragging, e.target);
        this.currentlyDragging = null;
        this.loggedEvent = 'handleDrop';
      },
      handleImageDrop: function (e) {
        console.log('handleImageDrop', this.currentlyDragging, e.target);
        this.currentlyDragging = null;
        this.loggedEvent = 'handleImageDrop';
      },
      handleDrag: function (e) {
        console.log('handleDrag', e);
        this.loggedEvent = 'handleDrag';
        if (!this.currentlyDragging) {
          this.currentlyDragging = e.srcElement;
        }
      }
    }
  });
</script>
</body>
</html>