[WIP] drag/drop fixes (#8851)

* Stable: Highlight pet on dragging food / add drag* events

* Stable: hatch dialog instead of popover / .btn-flat / update bootstrap-vie

* Layout: change sidebar width to fixed 236px - removed .col-2/.col-10

* Stable: Drag&Drop Food Image + Text - refactor directive to use custom event names

* Stable: fixes

* Stable: click to select food + attached food info box

* fix lint issues

* Drag&Drop&Click: Potions on Eggs - fix click on item + attached infobox-position in click mode

website/client/directives/mouseposition.directive.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+
+import _throttle from 'lodash/throttle';
+
+import { emit } from './directive.common';
+
+/**
+ * v-mousePosition="throttleTimeout", @mouseMoved="callback()"
+ */
+
+const EVENT_NAME = 'mouseMoved';
+
+export default {
+  bind (el, binding, vnode) {
+    el.handleMouseMove = _throttle((ev) => {
+      emit(vnode, EVENT_NAME, {
+        x: ev.clientX,
+        y: ev.clientY,
+      });
+    }, binding.value);
+
+    window.addEventListener('mousemove', el.handleMouseMove);
+
+    // send the first width
+    Vue.nextTick(el.handleWindowResize);
+  },
+
+  unbind (el) {
+    window.removeEventListener('mousemove', el.handleMouseMove);
+  },
+};