与interact.js拖放

Question

我正在尝试构建一个界面，该界面允许在某些元素上调整大小/拖动和旋转，并且要实现此目的，我正在使用interact.js javascript库。

我的交互功能正在运行：

    interact('.resize-drag-ratio')

      .draggable({

        onmove: window.dragMoveListener

      })

      .resizable({

        preserveAspectRatio: true,

        edges: { left: true, right: true, bottom: true, top: true }

      })

      .on('resizemove', function (event) {

        var target = event.target,

            x = (parseFloat(target.getAttribute('data-x')) || 0),

            y = (parseFloat(target.getAttribute('data-y')) || 0);

        var min_size = 35;

        if(event.rect.width>min_size){

            // update the element's style

            target.style.width  = event.rect.width + 'px';

            target.style.height = event.rect.height + 'px';

            // translate when resizing from top or left edges

            x += event.deltaRect.left;

            y += event.deltaRect.top;

            target.style.webkitTransform = target.style.transform =

                'translate(' + x + 'px,' + y + 'px)';

            target.setAttribute('data-x', x);

            target.setAttribute('data-y', y);

            }

      });

并拖动旋转以允许旋转

    interact('.drag-rotate')

      .draggable({

      onstart: function (event) {

        const element = event.target;

        const rect = element.getBoundingClientRect();

        // store the center as the element has css `transform-origin: center center`

        element.dataset.centerX = rect.left + rect.width / 2;

        element.dataset.centerY = rect.top + rect.height / 2;

        console.log("element.dataset.centerX: "+element.dataset.centerX);

        console.log("element.dataset.centerY: "+element.dataset.centerY);

这两个类使用jQuery进行切换，从而将拖动变成旋转，反之亦然。

我的问题是对象的位置和旋转角度不会保持原样，并且我不确定如何解决该问题。

在将元素拖动到某个位置并按下旋转按钮后，我开始旋转该元素，该元素向顶部：0px向左：0px移动，并且不停留在其拖动位置。

您可以在此处查看完整的工作代码：https : //codepen.io/yaary-vidanpeled/pen/ZZwGmE