用 interact.js 实现拖拽时元素位置偏移怎么办？

interact('.draggable').draggable({

  // 加上这个，关键！

  startAxis: 'xy',

  inertia: true,  // 顺带加个惯性，手感更好

  

  listeners: {

    // 重点来了：在 start 时初始化位置

    start(event) {

      const target = event.target;

      

      // 如果还没有记录过位置，就把当前 transform 的值同步进去

      // 或者直接获取元素在页面上的实际位置

      if (!target.hasAttribute('data-x')) {

        const rect = target.getBoundingClientRect();

        const parentRect = target.parentElement.getBoundingClientRect();

        

        // 计算相对于父元素的偏移

        const x = rect.left - parentRect.left;

        const y = rect.top - parentRect.top;

        

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

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

      }

    },

    

    move(event) {

      const target = event.target;

      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;

      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      

      target.style.transform = translate(${x}px, ${y}px);

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

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

    }

  }

});

.draggable {

  /* 这个很重要，否则触摸设备会有奇怪的默认行为 */

  touch-action: none;

  

  /* 让元素初始位置从原点开始，避免 CSS 定位干扰 */

  position: relative;

  top: 0;

  left: 0;

}

拖我试试

target.style.transform = translate(${x}px, ${y}px);