H5拖拽体验提升：避免鼠标禁用样式
在H5页面进行拖拽操作时，有时会遇到鼠标指针短暂显示禁用样式的情况，这通常是浏览器默认行为，表示当前位置无法放置拖拽元素。
为了优化用户体验，消除这种不友好的禁用样式，我们可以通过JavaScript模拟拖拽行为，而不是直接使用浏览器原生拖拽API。这种方法可以有效绕过浏览器的默认样式设置。
以下是一个简单的JavaScript代码示例，演示如何模拟拖拽过程：
const dragElement = document.querySelector(".drag");
const content = document.getElementById("content");
let isDragging = false;
let startX, startY;
dragElement.addEventListener("mousedown", (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
});
window.addEventListener("mousemove", (e) => {
if (!isDragging) return;
// 计算拖拽偏移量
const offsetX = e.clientX - startX;
const offsetY = e.clientY - startY;
// 更新拖拽元素位置
dragElement.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
});
content.addEventListener("dragover", (e) => {
e.preventDefault(); // 阻止默认行为
});
window.addEventListener("mouseup", () => {
isDragging = false;
});
通过这段代码，您可以自定义拖拽行为，从而避免浏览器默认的鼠标禁用样式，提供更流畅、更自然的拖拽体验。
