使用Interact JS实现元素缩放时遇Unexpected Identifier错误求助

我帮你排查出几个导致Unexpected Identifier错误的核心问题，还有一些影响功能的小问题，一步步来修复：

1. 移除对象末尾的多余逗号（触发错误的关键） #

你的JavaScript代码里，resizable配置的modifiers数组中，两个配置对象的最后一个属性后面都加了多余的尾随逗号。在早期JavaScript规范（比如ES5严格模式）中，对象或数组最后一项的尾随逗号会解析失败，直接抛出Unexpected Identifier错误。

错误代码片段： #

modifiers: [
  interact.modifiers.restrictEdges({
    outer: 'parent',
    endOnly: true, // 这里的多余逗号要删除
  }),
  interact.modifiers.restrictSize({
    min: { width: 100, height: 50 }, // 这里的多余逗号也要删除
  }),
],

修正后： #

modifiers: [
  // keep the edges inside the parent
  interact.modifiers.restrictEdges({
    outer: 'parent',
    endOnly: true
  }),
  // minimum size
  interact.modifiers.restrictSize({
    min: { width: 100, height: 50 }
  })
],

2. 补充缺失的dragMoveListener函数 #

你在draggable配置中指定了onmove: window.dragMoveListener，但这个函数并没有定义，会导致拖拽功能失效并报错。需要在你的JavaScript代码开头添加这个函数：

// 定义拖拽移动的监听函数
function dragMoveListener(event) {
  const target = event.target;
  // 获取元素当前的位置偏移量
  const x = parseFloat(target.getAttribute('data-x')) || 0;
  const y = parseFloat(target.getAttribute('data-y')) || 0;

  // 更新元素的位置
  target.style.transform = `translate(${x + event.dx}px, ${y + event.dy}px)`;

  // 保存新的位置数据到元素属性
  target.setAttribute('data-x', x + event.dx);
  target.setAttribute('data-y', y + event.dy);
}

// 将函数挂载到window对象，确保interact能调用到
window.dragMoveListener = dragMoveListener;

3. 修复HTML的DOCTYPE声明 #

你的HTML开头的<!DOCTYPE html5>是错误的，正确的标准HTML5声明是<!DOCTYPE html>，这会影响浏览器的渲染模式，建议修正：

<!DOCTYPE html>
<html>
<!-- 其余代码不变 -->
</html>

4. （可选）优化Interact.js的CDN链接 #

你当前引入的interact-js@2.1.0是旧的包名，官方现在的包名是interactjs，可以换成更稳定的官方CDN链接：

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

修正后的完整代码 #

JavaScript（drag.js）：

// 定义拖拽移动的监听函数
function dragMoveListener(event) {
  const target = event.target;
  const x = parseFloat(target.getAttribute('data-x')) || 0;
  const y = parseFloat(target.getAttribute('data-y')) || 0;

  target.style.transform = `translate(${x + event.dx}px, ${y + event.dy}px)`;
  target.setAttribute('data-x', x + event.dx);
  target.setAttribute('data-y', y + event.dy);
}

window.dragMoveListener = dragMoveListener;

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener,
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'parent',
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
      })
    ]
  })
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: 'parent',
        endOnly: true
      }),
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
      })
    ],
    inertia: true
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

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

    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);
    target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
  });

HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="drag.css">
  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
  <script src="drag.js"></script>
  <title>Drag and drop</title>
</head>
<body>
  <div class="resize-container">
    <div class="resize-drag">
    </div>
  </div>
</body>
</html>

CSS（drag.css）：

.resize-drag {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;
  touch-action: none;
  width: 120px;
  box-sizing: border-box;
}

.resize-container {
  display: inline-block;
  width: 100%;
  height: 240px;
  border: 1px solid #ddd; /* 可选：添加边框方便查看容器范围 */
}

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