Use proper drag events

resources/assets/js/components/main-wrapper/sidebar/index.vue

@@ -11,7 +11,8 @@
           <a :class="['queue', currentView == 'queue' ? 'active' : '']"
             href="/#!/queue"
             @dragleave="removeDroppableState"
-            @dragover.prevent="allowDrop"
+            @dragenter.prevent="allowDrop"
+            @dragover.prevent
             @drop.stop.prevent="handleDrop">Current Queue</a>
         </li>
         <li>

resources/assets/js/components/main-wrapper/sidebar/playlist-item.vue

@@ -2,7 +2,8 @@
   <li @dblclick.prevent="edit" :class="['playlist', type, editing ? 'editing' : '']">
     <a :href="playlistUrl"
       @dragleave="removeDroppableState"
-      @dragover.prevent="allowDrop"
+      @dragenter.prevent="allowDrop"
+      @dragover.prevent
       @drop.stop.prevent="handleDrop"
       :class="{ active: active }"
     >{{ playlist.name }}</a>

resources/assets/js/components/shared/song-item.vue

@@ -7,7 +7,8 @@
     @dblclick.prevent="playRightAwayyyyyyy"
     @dragstart="dragStart"
     @dragleave="dragLeave"
-    @dragover.prevent="dragOver"
+    @dragenter.prevent="dragEnter"
+    @dragover.prevent
     @drop.stop.prevent="drop"
     @contextmenu.prevent="contextMenu"
     :class="{ selected: item.selected, playing: playing }"
@@ -62,6 +63,8 @@ export default {
   },
 
   methods: {
+    noop () {},
+
     /**
      * Play the song right away.
      */
@@ -115,7 +118,7 @@ export default {
      * Proxy the dragover event to the parent song list component.
      * @param {Event} event The dragover event.
      */
-    dragOver (event) {
+    dragEnter (event) {
       this.parentSongList.allowDrop(event)
     },