如何防止物品被拖到手机上答案

【问题标题】：How do you prevent an item from being dragged on a mobile如何防止物品被拖到手机上
【发布时间】：2020-03-03 11:48:59
【问题描述】：

我在页面上有一个使用 HTML5 可拖动属性的元素 - 所以它可以被拾取并放在另一列中

在移动设备上，我不希望它是可拖动的，所以我尝试使用它：

document.addEventListener("dragstart", dragging, false);

function dragging(e) {
    if (window.matchMedia("(max-width: 767px)").matches) {
        e.preventDefault();
    }
}

适用于缩小到手机大小的桌面浏览器，但不适用于实际手机（android chrome 显然不支持 Dragstart）

元素看起来像：

<div class="card" draggable="true"></div>

将 draggable 设置为 false 也没有效果。

【问题讨论】：

标签： javascript html draggable

【解决方案1】：

你不能用 CSS 做这个吗？

@media only screen and (max-width: 767px) {
    .card {
       user-select: none;
    }
}

【讨论】：

我有，是的，但它只会停止文本的选择，项目仍然被拖动

【解决方案2】：

请试试这个：

@media only screen and (max-width: 767px) {
    .card {
       pointer-events: none;
    }
}

或者动态添加可拖动属性：

 if (!window.matchMedia("(max-width: 767px)").matches) {
     $(".card").attr("draagable",true);
     document.addEventListener("dragstart", dragging, false);  
 }

【讨论】：

这行得通 - 但也可以防止它被不幸点击