与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