如何用htmx实现点击按钮移动看板卡片，无需重载父容器？

核心思路 #

利用HTMX的Out-of-Band (OOB) 交换特性，同时完成两个独立DOM操作：删除原列中的目标卡片，在目标列插入结构不同的新卡片，全程无需重载任何父元素的全部内容。

前端实现代码 #

<!-- 待办列（div_parent_1） -->
<div id="div_parent_1" class="kanban-column">
  <h3>待办</h3>
  <!-- 待办状态卡片 -->
  <div id="card_123" class="todo-card">
    <h4>完成HTMX文档阅读</h4>
    <p>优先级：高</p>
    <button 
      hx-post="/move-card"
      hx-vals='{"card_id": "123", "target_column": "div_parent_2"}'
      hx-swap="none"
    >
      移至进行中
    </button>
  </div>
  <!-- 其他待办卡片 -->
</div>

<!-- 进行中列（div_parent_2） -->
<div id="div_parent_2" class="kanban-column">
  <h3>进行中</h3>
  <!-- 新卡片将被追加到此处 -->
</div>

后端处理逻辑（以Python Flask为例） #

后端接收移动请求，完成业务逻辑后返回两个OOB片段：

from flask import Flask, request

app = Flask(__name__)

@app.route("/move-card", methods=["POST"])
def move_card():
    card_id = request.form.get("card_id")
    target_column = request.form.get("target_column")
    
    # 此处添加业务逻辑：如更新数据库中卡片的状态、所属列等
    
    # 返回OOB交换片段
    return f"""
    <!-- 删除原待办卡片 -->
    <div id="card_{card_id}" hx-swap-oob="delete"></div>
    
    <!-- 生成结构不同的进行中卡片，追加到目标列 -->
    <div hx-swap-oob="beforeend" target-id="{target_column}">
      <div class="in-progress-card">
        <h4>完成HTMX文档阅读</h4>
        <div class="progress-bar" style="width: 30%"></div>
        <p>优先级：高 | 开始时间：2024-05-20</p>
        <button 
          hx-post="/move-card"
          hx-vals='{{"card_id": "{card_id}", "target_column": "div_parent_1"}}'
          hx-swap="none"
        >
          移回待办
        </button>
      </div>
    </div>
    """

if __name__ == "__main__":
    app.run(debug=True)

关键细节说明 #

• hx-swap="none"：告知HTMX不要替换按钮所在元素，所有DOM更新由OOB片段处理
• hx-swap-oob="delete"：通过匹配原卡片ID，直接从DOM中移除该元素
• hx-swap-oob="beforeend"：将新卡片追加到target-id指定的父元素末尾，实现跨列添加
• 新卡片可完全自定义结构：示例中待办卡片无进度条，进行中卡片新增进度条和开始时间，满足“HTML结构不同”的需求
• 父元素无重载：整个过程仅操作目标卡片，父列的其他内容保持不变，性能和体验更优

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