draggable事件与页面touchmove冲突怎么解决

Draggable事件通常用于实现元素的拖放功能，在移动设备上，如触摸屏幕，可能会触发浏览器的默认 touchmove 事件，这可能导致原生拖动效果与自定义的 draggable 事件冲突。解决这个问题的一种常见做法是：

1. 阻止默认的 touchmove 事件：当用户开始拖动元素时，通过 JavaScript 添加事件监听器，例如 `e.preventDefault()` 来阻止浏览器的默认处理。

element.addEventListener('mousedown', function(e) {
    element.addEventListener('touchmove', function(e) {
        e.preventDefault();
        // 自定义拖动逻辑
    });
});

2. 利用 touchmove 的取消分发（`event.stopPropagation()`）：只对当前事件链做出响应，不让其继续传播到父级元素。

element.addEventListener('touchstart', function(e) {
    e.target.addEventListener('touchmove', function(e) {
        // 拖动逻辑
        e.stopPropagation();
    });
});

3. 使用 touch-action 属性：可以设置元素的 CSS `touch-action` 属性为 "none"，禁止单独的 touchmove 触摸滑动，然后仅允许自定义的拖动行为。

.draggable-element {
    touch-action: none;
}

在完成这些操作后，记得在适当的时候移除监听器，以防止内存泄漏。