如何在Interact JS中仅允许元素从边角调整大小？

当然可行，Interact JS本身没有直接的配置项只开启边角拖拽，但可以通过自定义拖拽触发区域来实现。核心思路是放弃默认的全边界拖拽，转而给元素的四个边角添加专属的拖拽手柄，仅对手柄绑定调整行为。

具体实现步骤 #

1. HTML结构：给目标元素添加四个边角手柄

<div class="resizable-box">
  <div class="resize-handle top-left"></div>
  <div class="resize-handle top-right"></div>
  <div class="resize-handle bottom-left"></div>
  <div class="resize-handle bottom-right"></div>
</div>

2. CSS样式：将手柄定位到元素四个边角，并设置拖拽光标

.resizable-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
}

.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #666;
  border-radius: 3px;
}

.top-left {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

.top-right {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}

.bottom-left {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

.bottom-right {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
}

3. Interact JS逻辑：给每个手柄绑定resize行为，关联到父元素并限制调整方向

// 映射手柄对应的调整方向
const handleDirectionMap = {
  'top-left': 'nw',
  'top-right': 'ne',
  'bottom-left': 'sw',
  'bottom-right': 'se'
};

document.querySelectorAll('.resize-handle').forEach(handle => {
  interact(handle)
    .resizable({
      // 仅启用当前手柄对应的边角方向调整
      edges: { [handleDirectionMap[handle.classList[1]]]: true },
      // 调整目标为父容器
      target: () => handle.parentNode
    })
    .on('resizemove', event => {
      const target = event.target.parentNode;
      // 更新元素尺寸
      target.style.width = `${event.rect.width}px`;
      target.style.height = `${event.rect.height}px`;
      
      // 处理左上/左下手柄的位置偏移问题
      if (handle.classList.contains('top-left') || handle.classList.contains('bottom-left')) {
        target.style.left = `${event.rect.left}px`;
      }
      // 处理左上/右上手柄的位置偏移问题
      if (handle.classList.contains('top-left') || handle.classList.contains('top-right')) {
        target.style.top = `${event.rect.top}px`;
      }
    });
});

补充说明 #

• 这种方式完全限制了拖拽触发区域，只有点击四个边角手柄才能触发尺寸调整
• 可根据需求修改手柄的大小、颜色等样式，或调整光标类型
• 如果元素是静态定位（无需调整位置），可以删除位置更新的代码块

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