+
Windy 天气预测
';
@@ -2459,9 +2490,8 @@
'
';
}
- function createWeatherParam(icon, label, value) {
+ function createWeatherParam(label, value) {
return '
' +
- '' + icon + '' +
'' + label + '' +
'' + value + '' +
'
';
@@ -2484,6 +2514,179 @@
var index = Math.round(angle / 45) % 8;
return directions[index];
}
+
+ function initWeatherCardDrag() {
+ var weatherCard = document.getElementById('weatherForecastCard');
+ if (!weatherCard) return;
+
+ var isDragging = false;
+ var startX, startY;
+ var startLeft, startTop;
+
+ var originalStyles = {
+ top: '55%',
+ right: '20px',
+ left: 'auto',
+ transform: 'translateY(-50%)'
+ };
+
+ var cardHeader = weatherCard.querySelector('.weather-card-header');
+ cardHeader.addEventListener('dblclick', function() {
+ // 重置
+ weatherCard.style.top = originalStyles.top;
+ weatherCard.style.right = originalStyles.right;
+ weatherCard.style.left = originalStyles.left;
+ weatherCard.style.transform = originalStyles.transform;
+ });
+
+ var cardHeader = weatherCard.querySelector('.weather-card-header');
+ cardHeader.addEventListener('mousedown', function(e) {
+ if (e.target.tagName === 'BUTTON' ||
+ e.target.classList.contains('weather-nav-btn') ||
+ e.target.classList.contains('weather-close-btn')) {
+ return;
+ }
+
+ e.preventDefault();
+
+ startX = e.clientX;
+ startY = e.clientY;
+
+ var rect = weatherCard.getBoundingClientRect();
+ startLeft = rect.left;
+ startTop = rect.top;
+
+ // 准备拖动
+ isDragging = true;
+
+ // 设置为绝对定位(如果还不是)
+ if (getComputedStyle(weatherCard).position !== 'absolute') {
+ weatherCard.style.position = 'absolute';
+ weatherCard.style.top = rect.top + 'px';
+ weatherCard.style.left = rect.left + 'px';
+ weatherCard.style.right = 'auto';
+ weatherCard.style.transform = 'none';
+ }
+
+ weatherCard.style.opacity = '0.9';
+ weatherCard.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.25)';
+ weatherCard.style.zIndex = '1200';
+
+ document.body.style.userSelect = 'none';
+ });
+
+ // 鼠标移动事件
+ document.addEventListener('mousemove', function(e) {
+ if (!isDragging) return;
+
+ // 计算移动距离
+ var dx = e.clientX - startX;
+ var dy = e.clientY - startY;
+
+ // 计算新位置
+ var newLeft = startLeft + dx;
+ var newTop = startTop + dy;
+
+ // 限制在视口内
+ var maxX = window.innerWidth - weatherCard.offsetWidth;
+ var maxY = window.innerHeight - weatherCard.offsetHeight;
+
+ newLeft = Math.max(0, Math.min(newLeft, maxX));
+ newTop = Math.max(0, Math.min(newTop, maxY));
+
+ // 应用新位置
+ weatherCard.style.left = newLeft + 'px';
+ weatherCard.style.top = newTop + 'px';
+ });
+
+ // 鼠标释放事件
+ document.addEventListener('mouseup', function() {
+ if (!isDragging) return;
+
+ isDragging = false;
+ weatherCard.style.opacity = '1';
+ weatherCard.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.15)';
+
+ document.body.style.userSelect = '';
+ });
+
+ cardHeader.addEventListener('touchstart', function(e) {
+ if (e.target.tagName === 'BUTTON' ||
+ e.target.classList.contains('weather-nav-btn') ||
+ e.target.classList.contains('weather-close-btn')) {
+ return;
+ }
+
+ e.preventDefault();
+
+ var touch = e.touches[0];
+
+ startX = touch.clientX;
+ startY = touch.clientY;
+
+ // 获取当前卡片位置
+ var rect = weatherCard.getBoundingClientRect();
+ startLeft = rect.left;
+ startTop = rect.top;
+
+ // 准备拖动
+ isDragging = true;
+
+ // 设置为绝对定位(如果还不是)
+ if (getComputedStyle(weatherCard).position !== 'absolute') {
+ weatherCard.style.position = 'absolute';
+ weatherCard.style.top = rect.top + 'px';
+ weatherCard.style.left = rect.left + 'px';
+ weatherCard.style.right = 'auto';
+ weatherCard.style.transform = 'none';
+ }
+
+ // 添加活动样式
+ weatherCard.style.opacity = '0.9';
+ weatherCard.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.25)';
+
+ // 在拖动过程中临时禁用文本选择
+ document.body.style.userSelect = 'none';
+ });
+
+ document.addEventListener('touchmove', function(e) {
+ if (!isDragging) return;
+
+ e.preventDefault(); // 防止页面滚动
+
+ var touch = e.touches[0];
+
+ // 计算移动距离
+ var dx = touch.clientX - startX;
+ var dy = touch.clientY - startY;
+
+ // 计算新位置
+ var newLeft = startLeft + dx;
+ var newTop = startTop + dy;
+
+ // 限制在视口内
+ var maxX = window.innerWidth - weatherCard.offsetWidth;
+ var maxY = window.innerHeight - weatherCard.offsetHeight;
+
+ newLeft = Math.max(0, Math.min(newLeft, maxX));
+ newTop = Math.max(0, Math.min(newTop, maxY));
+
+ // 应用新位置
+ weatherCard.style.left = newLeft + 'px';
+ weatherCard.style.top = newTop + 'px';
+ });
+
+ document.addEventListener('touchend', function() {
+ if (!isDragging) return;
+
+ isDragging = false;
+ weatherCard.style.opacity = '1';
+ weatherCard.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.15)';
+
+ // 恢复文本选择功能
+ document.body.style.userSelect = '';
+ });
+ }