基于InteractJS与HTMX实现拖拽触发POST请求的架构问题

你的架构思路本身没问题，问题出在事件命名的处理方式上——HTMX对包含数字开头或特殊组合的事件名解析可能有局限，换一种传递ID的方式就能解决。

优化方案：用自定义事件的detail传递ID #

不要把ID嵌在事件名里，而是用CustomEvent的detail属性携带拖拽双方的ID，这样既避免了事件名的解析问题，也更符合自定义事件的最佳实践。

1. 修改JavaScript代码（InteractJS拖拽逻辑） #

创建CustomEvent而非基础Event，把两个元素的ID放到detail中：

// 假设你在InteractJS的drop回调里拿到了拖拽元素(draggableElement)和目标元素(dropTargetElement)
const dropEvent = new CustomEvent('interactjs:drop', {
  detail: {
    draggableId: draggableElement.getAttribute('data-obj-id'),
    targetId: dropTargetElement.getAttribute('data-obj-id')
  },
  bubbles: true, // 允许事件冒泡，确保HTMX能监听到
  cancelable: true
});

// 直接在目标元素上触发事件，更精准
dropTargetElement.dispatchEvent(dropEvent);

2. 修改HTMX元素配置 #

监听通用的interactjs:drop事件，用hx-vals从事件的detail中提取ID作为POST参数：

<div data-obj-id="{{ my_obj.id }}"
     hx-post="/my-post-call"
     hx-trigger="interactjs:drop"
     hx-vals='js:{"draggable_id": event.detail.draggableId, "target_id": event.detail.targetId}'>
  ...
</div>

为什么之前的方案失效？ #

HTMX的事件触发语法对事件名的格式有隐性要求：事件名需要以字母开头，如果直接用interactjs:drop-{{ my_obj.id }}（假设ID是纯数字），事件名会变成interactjs:drop-123这种格式，HTMX可能无法正确识别。

如果一定要坚持用事件名带ID的方式，也可以调整事件名为字母开头的格式，比如interactjs:drop-id-{{ my_obj.id }}，但这种方式需要每个元素监听不同的事件，代码冗余度更高，不如detail传参的方式灵活。

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