javascript - 如何防止项目在移动设备上被拖动

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>

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

Answer 1

请尝试这个:

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