csscross-browser3dtouch

Prevent Drag of images and Links on newer iPads with 3D Touch

I'm implementing press and hold to drag on a table of elements for a webpage.

This feature is very difficult, due to the various long-press menus on Android and iOS, and cross browser touch functionality differences.

I have block items that are basically div tags that contain images and links. The parent block item needs to be draggable.

Unfortunately, on newer iPads, safari lets you drag any image or link on any webpage. This messes up my drag and drop because it will start dragging the parent block, and then the image within the block will separate out and be draggable on its own.

From other stack overflow posts, the following CSS was recommended. I've applied it to all child elements, links and images included, but the images and links still separate out and are draggable on their own on newer ipads.

How do I prevent long-press drag and drop for images and links on newer iPads with 3D touch?

.drag-parent-wrapper * {
    @include user-select(none);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

NONE of this works. I've verified it applies recursively to all child img and link elements that still remain draggable on newer ipads.

I cannot block any touch or mouse events by default or my functionality is at risk across the board of devices.

Solution

  • This behavior can be switched off using the image tag's draggable attribute.

    For example:

    <img draggable="false" src="image.png" alt="image description" />

    From:

    http://www.denisbouquet.com/css-forbid-selection-user-select-dragging-ghost-image/