如何将从第一列拖拽到第二列的内容保存至数据库另一张表？

我要实现的功能：第一列展示数据库中的数据，这些数据可拖拽到第二列，最终将第二列的数据保存到数据库的另一张表中。已添加CSS方便测试，作为JavaScript新手，我认为问题出在脚本部分。

现有脚本的核心问题 #

• handleSaveButtonClick函数内部重复绑定了按钮点击事件，每次点击按钮都会新增一个事件监听，导致多次触发AJAX请求
• 初始状态下按钮没有绑定点击事件，第一次点击可能无法触发保存逻辑

修正后的完整代码 #

HTML #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Workout plan maker</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="column">
    <div class="portlet">
        <div class="portlet-header" data-id="1">A title</div>
        <div class="portlet-content">A description</div>
    </div>
    <div class="portlet">
        <div class="portlet-header" data-id="2">Another title</div>
        <div class="portlet-content">Another description</div>
    </div>
    <div class="portlet">
        <div class="portlet-header" data-id="3">One more title</div>
        <div class="portlet-content">One more description</div>
    </div>
</div>
<div class="column">
</div>
<button id="saveButton">Save</button>
</body>
</html>

CSS #

.tilt {
  transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
}

body {
  min-width: 520px;
}

.column {
  width: 170px;
  float: left;
  padding-bottom: 100px;
  border: 1px solid black;
}
.portlet {
  margin: 0 1em 1em 0;
  padding: 0.3em;
}
.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
}
.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}
.portlet-content {
  padding: 0.4em;
}
.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}

JavaScript #

$(onPageLoad);

function onPageLoad()
{
  $( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    start: function (event, ui) {
      ui.item.addClass('tilt');
    },
    stop: function (event, ui) {
      ui.item.removeClass('tilt');
    }
  });

  $( ".portlet" )
    .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
      .addClass( "ui-widget-header ui-corner-all" )
      .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

  $( ".portlet-toggle" ).click(function() {
    var icon = $( this );
    icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
    icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
  });

  // 将按钮点击绑定移到页面加载时执行，避免重复绑定
  $( "#saveButton" ).click(handleSaveButtonClick);
}

function handleSaveButtonClick() {
  var dataToSave = [];
  // 建议用data-id传递数据库主键，比文本更可靠
  $( ".column:last-child .portlet-header" ).each(function() {
    var itemId = $(this).data('id');
    var portletHeader = $(this).text().trim();
    dataToSave.push({
      id: itemId,
      title: portletHeader
    });
  });

  $.ajax({
    type: "POST",
    url: "/workout/create",
    data: { data: dataToSave },
    success: function(response) {
      alert("Data saved successfully!");
    },
    error: function() {
      alert("Error while saving data!");
    }
  });
}

额外优化建议 #

• 保存时尽量传递数据库主键（比如通过data-id属性），而不是标题文本，避免标题重复或修改导致数据匹配错误
• 可以添加拖拽完成后的视觉反馈，比如高亮第二列
• AJAX请求可以添加加载状态提示，提升用户体验

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