Как предотвратить перетаскивание элемента на мобильный

Question

У меня есть элемент на странице, который использует атрибут перетаскивания HTML5, поэтому его можно выбрать и выбросить в другой столбец

На мобильном устройстве я не хочу, чтобы это перетаскивалось, поэтому Я попытался использовать это:

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

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

, который работает в настольном браузере, уменьшенном до размера мобильного телефона, но не работает на реальном мобильном телефоне (очевидно, dragstart не поддерживается на android chrome)

Элемент выглядит так:

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

Установка значения draggaable в 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);  
 }

Answer 2

Разве вы не можете сделать это с CSS?

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