From 8dc98fa6d3c20f66bdc6686283cea50806ce502e Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Tue, 9 Sep 2025 14:09:02 +0800
Subject: [PATCH] 'commit'
---
dsLightRag/XingJun/move.html | 85 ++++++++++++++++++++++++++++++++----
1 file changed, 76 insertions(+), 9 deletions(-)
diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html
index 1fb9037c..fb370ea7 100644
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -87,6 +87,23 @@
z-index: 2;
cursor: move;
}
+
+ /* 保存按钮样式 */
+ .save-btn {
+ width: 100%;
+ padding: 10px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ margin-top: 20px;
+ }
+
+ .save-btn:hover {
+ background-color: #45a049;
+ }
@@ -104,6 +121,9 @@
+
+
+
@@ -111,6 +131,12 @@
// 获取DOM元素
const backgroundContainer = document.querySelector('.background-container');
const imageButtons = document.querySelectorAll('.image-btn');
+ const saveBtn = document.getElementById('savePositionsBtn');
+
+ // 页面加载时从localStorage读取并恢复箭头位置
+ document.addEventListener('DOMContentLoaded', () => {
+ loadArrowPositions();
+ });
// 为每个图片按钮添加点击事件
imageButtons.forEach(button => {
@@ -120,28 +146,69 @@
});
});
+ // 保存按钮点击事件
+ saveBtn.addEventListener('click', saveArrowPositions);
+
// 添加图片到主区域
- function addImageToContainer(imagePath) {
+ function addImageToContainer(imagePath, position = null) {
// 创建新的图片元素
const newImage = document.createElement('div');
newImage.className = 'arrow-image';
newImage.style.backgroundImage = `url('${imagePath}')`;
- // 设置初始位置（随机位置）
- const containerRect = backgroundContainer.getBoundingClientRect();
- const x = Math.random() * (containerRect.width - 155);
- const y = Math.random() * (containerRect.height - 173);
-
- newImage.style.left = `${x}px`;
- newImage.style.top = `${y}px`;
+ // 设置位置
+ if (position) {
+ // 从保存的数据加载位置
+ newImage.style.left = position.left;
+ newImage.style.top = position.top;
+ } else {
+ // 随机位置
+ const containerRect = backgroundContainer.getBoundingClientRect();
+ const x = Math.random() * (containerRect.width - 155);
+ const y = Math.random() * (containerRect.height - 173);
+ newImage.style.left = `${x}px`;
+ newImage.style.top = `${y}px`;
+ }
// 添加到容器
backgroundContainer.appendChild(newImage);
- // 可选：添加拖拽功能
+ // 添加拖拽功能
makeElementDraggable(newImage);
}
+ // 保存所有箭头位置到localStorage
+ function saveArrowPositions() {
+ const arrows = document.querySelectorAll('.arrow-image');
+ const arrowData = Array.from(arrows).map(arrow => ({
+ imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
+ left: arrow.style.left,
+ top: arrow.style.top
+ }));
+
+ localStorage.setItem('arrowPositions', JSON.stringify(arrowData));
+ alert('位置已保存！');
+ }
+
+ // 从localStorage加载箭头位置
+ function loadArrowPositions() {
+ const savedData = localStorage.getItem('arrowPositions');
+ if (savedData) {
+ try {
+ const arrowData = JSON.parse(savedData);
+ arrowData.forEach(data => {
+ addImageToContainer(data.imagePath, {
+ left: data.left,
+ top: data.top
+ });
+ });
+ } catch (e) {
+ console.error('加载保存的箭头位置失败:', e);
+ localStorage.removeItem('arrowPositions'); // 移除损坏的数据
+ }
+ }
+ }
+
// 使元素可拖拽
function makeElementDraggable(element) {
let isDragging = false;