interact.js中drop事件触发时如何修改元素CSS样式？

代码中样式修改不生效是两个核心写法错误导致的：

• 误用setAttribute设置样式：setAttribute的作用是操作HTML标签的属性，并非设置CSS样式的API。你连续两次给元素设置resize-drag属性，后一次赋值会直接覆盖前一次的值，且resize-drag是interact.js用来识别功能绑定的标识属性，本身不支持传入宽高样式值，完全不会触发样式变更。
• 原生DOM元素不存在直接挂载的.transform属性，修改transform效果必须通过元素的style对象操作，且宽高不属于transform的控制范畴，该写法本身不符合DOM API规范。

将ondrop回调内的错误逻辑替换为以下内容即可：

ondrop: function (event) {
    console.log("here")
    const dragTarget = event.relatedTarget
    // 通过DOM元素的style对象设置行内样式
    dragTarget.style.width = '100px'
    dragTarget.style.height = '100px'

    // 如果需要修改transform属性（比如拖拽后固定元素落点位置），可参考以下写法：
    // const dropPos = event.dragEvent.page
    // dragTarget.style.transform = `translate(${dropPos.x}px, ${dropPos.y}px)`
}

补充说明：如果可拖拽元素提前绑定了interact.js的拖拽、缩放能力，修改尺寸后如果出现交互偏移，可以追加一行interact(dragTarget).reflow()，让框架重新同步元素的位置、尺寸状态，避免交互错位。

内容的提问来源于stack exchange，提问作者vlex