如何防止某项在移动设备上拖动

Question

我在页面上有一个元素，该元素使用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>

将可拖动属性设置为false也无效。

Answer 1

您不能使用CSS做到这一点吗？

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

Answer 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);  
 }