如何在VueJs中使Contenteditable可拖动、可调整大小

Vue.directive('draggable-resizable', {
  bind(el, binding, vnode) {
    // 初始化元素的位置和大小
    el.style.position = 'absolute';
    el.style.left = binding.value.left + 'px';
    el.style.top = binding.value.top + 'px';
    el.style.width = binding.value.width + 'px';
    el.style.height = binding.value.height + 'px';

    // 添加拖动功能
    el.addEventListener('mousedown', startDrag);

    function startDrag(e) {
      e.preventDefault();
      const startX = e.clientX;
      const startY = e.clientY;
      const startLeft = parseInt(el.style.left);
      const startTop = parseInt(el.style.top);

      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', stopDrag);

      function drag(e) {
        const deltaX = e.clientX - startX;
        const deltaY = e.clientY - startY;
        el.style.left = startLeft + deltaX + 'px';
        el.style.top = startTop + deltaY + 'px';
      }

      function stopDrag() {
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('mouseup', stopDrag);
      }
    }

    // 添加调整大小功能
    const resizer = document.createElement('div');
    resizer.style.position = 'absolute';
    resizer.style.width = '10px';
    resizer.style.height = '10px';
    resizer.style.bottom = '0';
    resizer.style.right = '0';
    resizer.style.cursor = 'se-resize';
    el.appendChild(resizer);

    resizer.addEventListener('mousedown', startResize);

    function startResize(e) {
      e.preventDefault();
      const startX = e.clientX;
      const startY = e.clientY;
      const startWidth = parseInt(el.style.width);
      const startHeight = parseInt(el.style.height);

      document.addEventListener('mousemove', resize);
      document.addEventListener('mouseup', stopResize);

      function resize(e) {
        const deltaX = e.clientX - startX;
        const deltaY = e.clientY - startY;
        el.style.width = startWidth + deltaX + 'px';
        el.style.height = startHeight + deltaY + 'px';
      }

      function stopResize() {
        document.removeEventListener('mousemove', resize);
        document.removeEventListener('mouseup', stopResize);
      }
    }
  },
});

<template>
  <div v-draggable-resizable="{ left: 100, top: 100, width: 200, height: 100 }" contenteditable>
    可拖动、可调整大小的Contenteditable内容
  </div>
</template>