Перемещаемые элементы управления не прокручиваются вместе с содержимым

#javascript #vue.js #moveable

Вопрос:

Я использую подвижную библиотеку для перетаскивания и изменения размера элементов.

Ниже приведен мой код для приложения vuejs.

       moveable: {
        draggable: true,
        throttleDrag: 0,
        resizable: true,
        throttleResize: 1,
        keepRatio: false,
        scalable: true,
        throttleScale: 0,
        rotatable: true,
        throttleRotate: 0,
        pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
        origin: false
      }
 

Ниже приведен HTML-код для того же

         <div id="editor">
          <Moveable
           class="moveable"
           v-bind="moveable"
           @drag="handleDrag"
           @resize="handleResize"
           @scale="handleScale"
           @rotate="handleRotate"
           @warp="handleWarp"
           @pinch="handlePinch"
         >
          <span>
           This is moveable div
          </span>
         </Moveable>
       </div>


 

Итак, это выглядит так, как показано ниже.

введите описание изображения здесь

Но когда я перетаскиваю подвижный элемент, элементы управления не перетаскиваются вместе с элементом. Это исправляется.

введите описание изображения здесь

I also tried to give the container property to the moveable object like this
container: document.getElementById('editor') , but then also it’s not working as expected.

I am not sure what the problem is.