function startDrag(event) {
  const el = event.target;
  const dx = event.clientX - el.offsetLeft;
  const dy = event.clientY - el.offsetTop;

  function doDrag(e) {
    el.style.pointerEvents = 'none';
    el.style.left = e.clientX - dx + 'px';
    el.style.top = e.clientY - dy + 'px';
  }
  function stopDrag() {
    el.style.pointerEvents = null;
    document.removeEventListener('mousemove', doDrag);
    document.removeEventListener('mouseup', stopDrag);
  }
  document.addEventListener('mousemove', doDrag);
  document.addEventListener('mouseup', stopDrag);
}
const drag = (el, binding) => {
  el.style.pointerEvents = null;
  el.addEventListener('mousedown', startDrag);
};

export default {
  mounted(el, binding) {
    drag(el, binding);
  },
};
