div元素是Drag & Drop。
我想将div class="prod_image_wrap">的位置保存到json文件中。
然后，我需要使用相同页面中的坐标来显示基于JSON的这些元素，或者使用HTML和JavaScript来显示不同的元素。

的数据

$(function() {
  // Retrieve positions from JSON file or initialize with default values
  var savedPositions = {
    // Initialize with default positions (you can change these values)
    "https://via.placeholder.com/130": {
      "left": "0px",
      "top": "0px"
    }
  };

  // Function to save positions to JSON file (via AJAX)
  function savePositionsToJSON() {
    var jsonData = JSON.stringify(savedPositions);
    // Here, you should use AJAX to send jsonData to the server and save it to a JSON file.
    // Replace "your-server-endpoint" with the URL where your server-side script will handle the saving.
    // $.post("your-server-endpoint", { data: jsonData }, function(response) {
    //   console.log("Positions saved to JSON.");
    // });
  }

  // Function to update positions object and save
  function updatePositionAndSave(id, position) {
    savedPositions[id] = position;
    savePositionsToJSON();
  }

  // Make .prod_image_wrap elements draggable
  $(".prod_image_wrap").each(function() {
    var $this = $(this);
    var imageId = $this.find("img").attr("src"); // Get the image source as an ID

    // Initialize position based on savedPositions or default (if not found in savedPositions)
    var position = savedPositions[imageId] || {
      "left": $this.css("left"),
      "top": $this.css("top")
    };

    // Apply initial position
    $this.css({
      "left": position.left,
      "top": position.top,
      "position": "absolute"
    });

    // Make elements draggable
    $this.draggable({
      stop: function(event, ui) {
        updatePositionAndSave(imageId, ui.position); // Save the new position on drag stop
      }
    });
  });
});

.prod_image {
  display: inline-block;
}

.prod_image_wrap {
  display: inline-block;
  margin: 0 5px;
  text-align: center;
  height: 265px;
  vertical-align: top;
}

.dim_error {
  color: #ff0000;
}

.prod_image_top {
  display: block;
}

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

.prod_image img.bag_img {
  max-width: 300px;
}

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

.imagecount {
  display: inline-block;
}

<h1>Outfit Builder</h1>

<div class="prod_image_wrap">
  <div class="prod_image">
    <a href="http://www.example.com"><img src="https://via.placeholder.com/130" alt="Product 1" /></a>
  </div>
  <div class="prod_name">Product 1
  </div>
</div>

<div class="prod_image_wrap">
  <div class="prod_image">
    <a href="http://www.example.com"><img src="https://via.placeholder.com/130" alt="Product 2" /></a>
  </div>
  <div class="prod_name">Product 2
  </div>
</div>

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