如何用JavaScript保存拖拽元素位置至JSON文件并基于JSON展示元素

需求说明 #

1. 将带有prod_image_wrap类的可拖拽div元素位置保存到JSON文件
2. 从JSON文件读取坐标，在页面中还原元素位置

完整实现代码 #

1. 拖拽与位置保存页面代码 #

HTML结构

<h1>搭配编辑器</h1>

<div class="prod_image_wrap">
  <div class="prod_image">
    <a href="#"><img src="https://via.placeholder.com/130" alt="商品1" /></a>
  </div>
  <div class="prod_name">商品1</div>
</div>

<div class="prod_image_wrap">
  <div class="prod_image">
    <a href="#"><img src="https://via.placeholder.com/130?text=Product2" alt="商品2" /></a>
  </div>
  <div class="prod_name">商品2</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

CSS样式

.prod_image {
  display: inline-block;
}

.prod_image_wrap {
  display: inline-block;
  margin: 0 5px;
  text-align: center;
  height: 265px;
  vertical-align: top;
  position: absolute; /* 必须设置为绝对定位才能拖拽 */
}

.prod_image img {
  display: block;
  margin: auto;
  border: none;
  max-width: 110px;
}

.prod_name {
  max-width: 150px;
  display: block;
  margin: auto;
}

JavaScript逻辑（拖拽+保存位置）

$(function() {
  // 初始化位置数据，也可以先从服务器加载已保存的JSON
  let savedPositions = {};

  // 从服务器加载已保存的位置数据
  $.get("/get-positions", function(data) {
    if (data) {
      savedPositions = data;
      // 加载完成后初始化元素位置
      initElementPositions();
    }
  });

  // 初始化元素位置
  function initElementPositions() {
    $(".prod_image_wrap").each(function() {
      const $this = $(this);
      const imageSrc = $this.find("img").attr("src");
      // 使用保存的位置，没有则用默认位置
      const position = savedPositions[imageSrc] || { left: "0px", top: "0px" };
      
      $this.css({
        left: position.left,
        top: position.top
      });

      // 绑定拖拽事件
      $this.draggable({
        stop: function(event, ui) {
          // 更新位置数据并保存到服务器
          savedPositions[imageSrc] = {
            left: `${ui.position.left}px`,
            top: `${ui.position.top}px`
          };
          savePositionsToServer();
        }
      });
    });
  }

  // 发送位置数据到服务器保存为JSON
  function savePositionsToServer() {
    const jsonData = JSON.stringify(savedPositions);
    $.post("/save-positions", { data: jsonData }, function(response) {
      console.log("位置已保存");
    });
  }

  // 页面加载时先初始化元素
  if (Object.keys(savedPositions).length === 0) {
    initElementPositions();
  }
});

2. 服务器端处理（示例：Node.js/Express） #

前端无法直接写入本地文件，需要后端接口处理保存和读取：

const express = require('express');
const fs = require('fs');
const app = express();
const path = require('path');

// 解析POST请求的表单数据
app.use(express.urlencoded({ extended: true }));

// 静态文件服务（托管前端页面）
app.use(express.static(path.join(__dirname, 'public')));

// 读取保存的位置数据
app.get('/get-positions', (req, res) => {
  fs.readFile('positions.json', 'utf8', (err, data) => {
    if (err) {
      // 文件不存在则返回空对象
      res.json({});
      return;
    }
    res.json(JSON.parse(data));
  });
});

// 保存位置数据到JSON文件
app.post('/save-positions', (req, res) => {
  const jsonData = req.body.data;
  fs.writeFile('positions.json', jsonData, (err) => {
    if (err) {
      res.status(500).send('保存失败');
      return;
    }
    res.send('保存成功');
  });
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

3. 位置加载展示页面（可单独页面或同一页面） #

如果需要在其他页面展示保存的位置，只需要加载JSON并设置元素位置：

<h1>已保存的搭配展示</h1>

<div class="prod_image_wrap">
  <div class="prod_image">
    <a href="#"><img src="https://via.placeholder.com/130" alt="商品1" /></a>
  </div>
  <div class="prod_name">商品1</div>
</div>

<div class="prod_image_wrap">
  <div class="prod_image">
    <a href="#"><img src="https://via.placeholder.com/130?text=Product2" alt="商品2" /></a>
  </div>
  <div class="prod_name">商品2</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  // 从服务器获取保存的位置数据
  $.get("/get-positions", function(savedPositions) {
    $(".prod_image_wrap").each(function() {
      const $this = $(this);
      const imageSrc = $this.find("img").attr("src");
      const position = savedPositions[imageSrc];
      
      if (position) {
        $this.css({
          left: position.left,
          top: position.top,
          position: "absolute"
        });
      }
    });
  });
});
</script>
<link rel="stylesheet" href="styles.css"> <!-- 引用和之前相同的CSS文件 -->

关键说明 #

• 元素必须设置position: absolute才能通过left/top控制位置
• 用图片的src作为唯一标识，确保每个元素的位置可以准确对应
• 服务器端需要处理文件读写，这里用Node.js示例，你也可以用PHP、Python等其他后端语言实现相同接口
• 拖拽停止时即时保存位置，避免数据丢失

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