如何将jQuery可拖拽DIV的屏幕位置存入MySQL实现刷新后位置保留

整个实现分3个核心步骤，逻辑简单，跟着修改即可跑通。

第一步：创建存储位置的数据库表 #

先在你的MySQL库中执行以下SQL，建一张专门存DIV坐标的表，示例默认适配单用户场景，多用户场景可自行添加user_id字段做身份区分：

CREATE TABLE `div_positions` (
  `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `pos_x` int(11) NOT NULL COMMENT 'DIV距页面左侧像素值',
  `pos_y` int(11) NOT NULL COMMENT 'DIV距页面顶部像素值',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 插入一条初始位置数据，默认放在页面左上角
INSERT INTO `div_positions` (`id`, `pos_x`, `pos_y`) VALUES (1, 20, 20);

第二步：编写后端PHP接口 #

新建position_api.php文件，负责两个核心能力：接收前端传的坐标存入数据库、向前端返回上次存储的坐标。代码已做SQL注入防护，使用前把数据库连接配置替换为你自己的实际信息即可：

<?php
// 数据库配置，替换为你自己的账号信息
$db_host = 'localhost';
$db_user = '你的数据库账号';
$db_pass = '你的数据库密码';
$db_name = '你的数据库名';

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    exit(json_encode(['code'=>500, 'msg'=>'数据库连接失败']));
}
mysqli_set_charset($conn, 'utf8mb4');

// POST请求逻辑：保存前端上传的坐标
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $x = intval($_POST['x'] ?? 0);
    $y = intval($_POST['y'] ?? 0);
    $stmt = mysqli_prepare($conn, "UPDATE div_positions SET pos_x=?, pos_y=? WHERE id=1");
    mysqli_stmt_bind_param($stmt, "ii", $x, $y);
    $ret = mysqli_stmt_execute($stmt);
    exit(json_encode(['code'=> $ret ? 200 : 500]));
}

// GET请求逻辑：返回已存储的历史坐标
$res = mysqli_query($conn, "SELECT pos_x, pos_y FROM div_positions WHERE id=1");
$pos = mysqli_fetch_assoc($res);
exit(json_encode([
    'code'=>200,
    'data'=>[
        'x'=>intval($pos['pos_x']),
        'y'=>intval($pos['pos_y'])
    ]
]));
?>

第三步：改造原有前端代码 #

你原有代码存在几个需要修正的问题：

• 重复引入了2次jQuery和jQuery UI，删除重复的本地引入脚本即可
• 可拖拽DIV未设置绝对定位，top/left坐标规则不会生效
• 缺少拖拽结束的事件监听，也没有页面加载时读取历史位置的逻辑

改造后的完整前端代码如下：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 仅保留一份CDN引入的jQuery和jQuery UI，删除重复的本地脚本引入 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
  <title>课程跟踪器</title>
  <style>
    /* 给可拖拽元素加绝对定位，是坐标生效的核心前提 */
    .mydraggable {
      position: absolute;
      width: 150px;
      height: 51px;
      padding: 0.5em;
      text-align: center;
      background: silver;
      cursor: pointer;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: normal;
      border-style: dotted;
    }
    h1 {
      color: blue;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 30px;
      font-weight: normal;
      text-align: center;
    }
    p {
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      font-weight: normal;
      text-align: center;
      margin:0;
    }
    .button {
      background-color: #008CBA;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>课程跟踪器</h1>
  <div class="mydraggable ui-widget-content" id="trackerBox">
    <p>此处输出MySQL数据库内容</p>
  </div>

  <script>
    $(function() {
      const $box = $('#trackerBox');
      // 页面加载完成先拉取数据库存储的历史位置，设置DIV初始坐标
      $.get('position_api.php', function(res) {
        if (res.code === 200) {
          $box.css({
            left: res.data.x + 'px',
            top: res.data.y + 'px'
          });
        }
        // 位置设置完成后再初始化拖拽功能
        $box.draggable({
          // 拖拽动作结束时，获取当前坐标发送给后端保存
          stop: function(event, ui) {
            $.post('position_api.php', {
              x: ui.position.left,
              y: ui.position.top
            });
          }
        });
      });
    });
  </script>
</body>
</html>

注意事项 #

• 如果要实现多用户各自保存独立的DIV位置，只需要在PHP接口中从登录态（比如Session）获取当前用户ID，存、取位置时都按用户ID匹配即可，核心逻辑和示例完全一致
• 示例逻辑为拖拽完全停止后才发送保存请求，不会频繁调用接口，不需要额外添加防抖逻辑
• 确保position_api.php和前端页面放在同一个站点目录下，否则会出现跨域问题

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