huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-09 14:09:02 +08:00
parent 016dbbb63d
commit 8dc98fa6d3
1 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
dsLightRag/XingJun/move.html
View File

@@ -87,6 +87,23 @@
z-index: 2; z-index: 2;
cursor: move; 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;
}
</style> </style>
</head> </head>
<body> <body>
@@ -104,6 +121,9 @@
<div class="image-btn" data-image="./4.png" style="background-image: url('./4.png');"></div> <div class="image-btn" data-image="./4.png" style="background-image: url('./4.png');"></div>
<div class="image-btn" data-image="./5.png" style="background-image: url('./5.png');"></div> <div class="image-btn" data-image="./5.png" style="background-image: url('./5.png');"></div>
</div> </div>
<!-- 新增保存按钮 -->
<button class="save-btn" id="savePositionsBtn">保存位置</button>
</div> </div>
</div> </div>
@@ -111,6 +131,12 @@
// 获取DOM元素 // 获取DOM元素
const backgroundContainer = document.querySelector('.background-container'); const backgroundContainer = document.querySelector('.background-container');
const imageButtons = document.querySelectorAll('.image-btn'); const imageButtons = document.querySelectorAll('.image-btn');
const saveBtn = document.getElementById('savePositionsBtn');
// 页面加载时从localStorage读取并恢复箭头位置
document.addEventListener('DOMContentLoaded', () => {
loadArrowPositions();
});
// 为每个图片按钮添加点击事件 // 为每个图片按钮添加点击事件
imageButtons.forEach(button => { imageButtons.forEach(button => {
@@ -120,28 +146,69 @@
}); });
}); });
// 保存按钮点击事件
saveBtn.addEventListener('click', saveArrowPositions);
// 添加图片到主区域 // 添加图片到主区域
function addImageToContainer(imagePath) { function addImageToContainer(imagePath, position = null) {
// 创建新的图片元素 // 创建新的图片元素
const newImage = document.createElement('div'); const newImage = document.createElement('div');
newImage.className = 'arrow-image'; newImage.className = 'arrow-image';
newImage.style.backgroundImage = `url('${imagePath}')`; newImage.style.backgroundImage = `url('${imagePath}')`;
// 设置初始位置（随机位置） // 设置位置
if (position) {
// 从保存的数据加载位置
newImage.style.left = position.left;
newImage.style.top = position.top;
} else {
// 随机位置
const containerRect = backgroundContainer.getBoundingClientRect(); const containerRect = backgroundContainer.getBoundingClientRect();
const x = Math.random() * (containerRect.width - 155); const x = Math.random() * (containerRect.width - 155);
const y = Math.random() * (containerRect.height - 173); const y = Math.random() * (containerRect.height - 173);
newImage.style.left = `${x}px`; newImage.style.left = `${x}px`;
newImage.style.top = `${y}px`; newImage.style.top = `${y}px`;
}
// 添加到容器 // 添加到容器
backgroundContainer.appendChild(newImage); backgroundContainer.appendChild(newImage);
// 可选：添加拖拽功能 // 添加拖拽功能
makeElementDraggable(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) { function makeElementDraggable(element) {
let isDragging = false; let isDragging = false;