Links not working on the mobile version of the site?

Question

HTML

There is this code:

@foreach($images as $image)
    <div class="span3 my-img" data-image-id="{{ $image->id }}">
        <img src="/photo/{{ $object->id }}/{{ $image->id }}.{{ $image->name }}" style="height: 100px;" />
        <p><a href="#" data-object-id="{{ $object->id }}" data-image-id="{{ $image->id }}" onclick="return deleteImage(this)">УДАЛИТЬ</a></p>
    </div>
@endforeach

It is used in the admin part of the site, so I can’t show it on the site.

The "DELETE" link does not work when they enter the site through smartphones, in the imitation of the mobile version in the browser - everything is ok.

The draggable code is still attached to this div, that is, the divs are dragged along with the links.

What could be?

Answer 1

Make draggable on a separate handle, and not on the whole div, most likely the touchstart swallows the click.

More or less like this

For jquery draggable example here: https://jqueryui.com/draggable/#handle
For sortablejs here: sortablejs.github.io/Sortable/#handle