Javascript 使用interact.js拖放

我正在尝试构建一个界面，允许对某些元素进行调整大小/拖动和旋转，为此，我使用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);

        // get the angle of the element when the drag starts
        element.dataset.angle = getDragAngle(event);
      },
      onmove: function (event) {
        var element = event.target;
        var center = {
          x: 300,
          y: 300,
        };

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

        var angle = getDragAngle(event);

        // update transform style on dragmove
      element.style.transform = 'rotate(' + angle + 'rad' + ')';
      },
      onend: function (event) {
        const element = event.target;

        // save the angle on dragend
        element.dataset.angle = getDragAngle(event);
      },
    })

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

我的问题是，对象的位置和旋转角度没有保持在原来的位置，我不知道如何解决这个问题

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

您可以在此处看到完整的工作代码： 问题： 这是因为每次应用css时，都会覆盖以前的样式

这里有一个例子，假设您有一个文本（

#text

元素），颜色为

红色，现在您想用JavaScript更改它

document.getElementById('text').style.color = 'green';

这里到底发生了什么？指定为样式对象的颜色属性的内容现在将被覆盖

同样的事情也会发生在您编写时（在您的交互初始化
。调整拖动比率的大小
）：

并通过写入再次覆盖
翻译
（在
的交互初始化中。拖动旋转
）

记住
rotate（）
和
translate（）
都是css
translate
属性的值

解决方案：
您应该以某种方式保留所有这些旋转角度，并平移值。（看起来您已经为他们准备了
数据属性
，所以这并不难）

并应用
元素.style.transform的值，如下所示：

target.style.transform = 'translate(' + x + 'px,' + y + 'px) rotate(' + angle + 'rad)';

注意：您的代码片段声明了两次
函数dragMoveListener（event）{

工作片段：


console.log（'start'）；
//功能是
函数isEven（n）{
返回n==parseFloat（n）！（n%2）：无效0；
}
交互（“.调整拖动比大小”）
.拖拉({
onmove:window.dragMoveListener
})
.可调整大小({
是的，
边缘：{
左：对，
对:对，
底部：是的，
托普：没错
}
})
.on（'resizemove'，函数（事件）{
var target=event.target，
x=（parseFloat（target.getAttribute（'data-x'））| | 0），
y=（parseFloat（target.getAttribute（'data-y'））| | 0）；
旋转=（parseFloat（target.getAttribute（'data-angle'））| | 0）
变量最小值=35；
if（event.rect.width>min_size）{
//更新元素的样式
target.style.width=event.rect.width+'px'；
target.style.height=event.rect.height+'px'；
//从上边缘或左边缘调整大小时平移
x+=event.deltaRect.left；
y+=event.deltaRect.top；
target.style.webkitttransform=target.style.transform=
'平移（'+x+'px'，+y+'px）旋转（'+rotation+'rad'）；
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
}
});
交互（“.调整拖动大小”）
.拖拉({
onmove:window.dragMoveListener
})
.可调整大小({
PreserveSpectratio:false，
边缘：{
左：对，
对:对，
底部：是的，
托普：没错
}
})
.on（'resizemove'，函数（事件）{
var target=event.target，
x=（parseFloat（target.getAttribute（'data-x'））| | 0），
y=（parseFloat（target.getAttribute（'data-y'））| | 0），
旋转=（parseFloat（target.getAttribute（'data-angle'））| | 0）
//log（“event.rect.width:+event.rect.width”）；
//防止调整到小于35px的单位
变量最小值=35；
if（event.rect.width>min_size）{
//更新元素的样式
target.style.width=event.rect.width+'px'；
target.style.height=event.rect.height+'px'；
//$（“#form_bubble_width”）.val（event.rect.width）；
//$（“#形状_气泡_宽度”）.val（event.rect.height）；
//从上边缘或左边缘调整大小时平移
x+=event.deltaRect.left；
y+=event.deltaRect.top；
target.style.webkitttransform=target.style.transform=
'平移（'+x+'px'，+y+'px）旋转（'+rotation+'rad'）；
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
//target.textContent=event.rect.width+'×'+event.rect.height；
}
});
//具有“draggable”类的目标元素
交互（“.draggable”）
.拖拉({
//启用惯性投掷
惯性：没错，
//将元素保持在其父元素的区域内
限制：{
限制：“家长”，
是的，
elementRect：{
排名：0，
左:0,，
底部：1，
右：1
}
},
//启用自动滚动
autoScroll：是的，
//在每次dragmove事件中调用此函数
onmove:dragMoveListener，
//在每个dragend事件上调用此函数
ONED：功能（事件）{
//var textEl=event.target.querySelector（'p'）；
console.log（event.target.id）
变量距离=（Math.sqrt（Math.pow）（event.pageX-event.x0，2）+
数学pow（event.pageY-event.y0,2）|0））
.toFixed（2）+“px”；
}
});
交互（'.resize drag，.resize drag ratio'）。打开（'tap'，函数（事件）{
event.preventDefault（）；
var target=event.target
log（“点击调整大小拖动类元素”）；
var uuid=target.id；
//日志（“uuid:+uuid”）；
控制台日志（“单击”）；
});
函数dragMoveListener（事件）{
var target=event.target，
//在data-x/data-y属性中保持拖动位置
x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx，
y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy，
旋转=（parseFloat（target.getAttribute（'data-angle'））| | 0）；
//翻译元素
target.style.webkitTransform=
target.style.transform=
“翻译
element.style.transform = 'rotate(' + angle + 'rad' + ')';

target.style.transform = 'translate(' + x + 'px,' + y + 'px) rotate(' + angle + 'rad)';