如何动态获取可拖拽编辑元素的值并按顺序提交至PHP？

1. 修正动态元素的事件绑定 #

动态生成的元素不能用重复ID，先把按钮的id="submit_titre"改成class="submit-titre"，再通过事件委托绑定点击事件（绑定到静态父容器，确保新生成的按钮也能触发）：

// 假设所有动态内容都放在#drag-container容器内
$('#drag-container').on('click', '.submit-titre', function(event) {
  event.preventDefault();
  // 定位当前按钮所属的内容项，获取输入值
  var inputVal = $(this).closest('.content-item').find('.titre-input').val();
  // 把值存到内容项的自定义属性中，方便后续统一收集
  $(this).closest('.content-item').data('content', inputVal);
});

2. 按拖拽顺序收集所有内容 #

提交时直接遍历拖拽容器内的内容项（DOM顺序就是拖拽后的最终顺序），把内容整理成数组后存入隐藏输入框：

$('button#final-submit').click(function(event) {
  event.preventDefault();
  var contentList = [];
  // 遍历所有内容项，按当前顺序收集内容
  $('#drag-container .content-item').each(function() {
    var itemContent = $(this).data('content') || $(this).find('.titre-input').val();
    if (itemContent) {
      contentList.push(itemContent);
    }
  });
  // 把数组转成JSON字符串，存入隐藏input供PHP接收
  $('input#post_content').val(JSON.stringify(contentList));
  // 提交表单
  $('form').submit();
});

3. PHP端接收与处理 #

PHP中解码JSON字符串，即可得到按拖拽顺序排列的内容数组：

if (isset($_POST['post_content'])) {
  $contentItems = json_decode($_POST['post_content'], true);
  // $contentItems就是拖拽后的有序内容数组，可直接用于存储或其他处理
}

4. 拖拽同步优化（可选） #

如果使用jQuery UI Sortable，可监听拖拽完成事件，确保顺序实时同步（无需额外操作，仅做验证用）：

$('#drag-container').sortable({
  update: function(event, ui) {
    // 拖拽完成后，DOM顺序已自动更新，提交时直接遍历即可
  }
});

关键注意事项 #

• 动态元素绝对不能用重复ID，全部改用class选择器，通过closest()/find()定位关联元素
• 必须用事件委托绑定动态元素的事件，否则新生成的元素无法触发事件
• 依赖DOM顺序收集内容，无需手动维护序号，简单可靠且能保证拖拽后的顺序准确性

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