CODEWITHSUNDEEP
javascripthtmldraggable
Paul
Paul

Reputation: 9561

How do you prevent an item from being dragged on a mobile

I have an element on the page which use the HTML5 draggable attribute - so it can be picked up and dropped in another column

On mobile, I don't want this to be draggable, so I tried to use this:

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

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

Which works on a desktop browser shrunk to the size of a mobile, but doesn't work on an actual mobile (dragstart apparently isn't supported on android chrome)

The element just looks like:

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

Setting draggable to false also has no effect.

Upvotes: 2

Views: 1502

Answers (2)

Batsheva Hansav
Batsheva Hansav

Reputation: 316

Please try this:

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

Or add the draggable attr dynamically:

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

Upvotes: 1

ecolema
ecolema

Reputation: 598

Can you not do this with CSS?

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

Upvotes: 0

Related Questions