проблема с пользовательским интерфейсом, невозможно ввести в поле ввода на мобильном устройстве, поскольку родительский контейнер можно перетаскивать

Question

я создаю виджет для загрузки нескольких фотографий для клиента, который позволяет ему загружать фотографии, используя ajax, компонент после загрузки перечисляет фотографии в сетке, эти фотографии в основном находятся внутри контейнера div (который перетаскивается / drop / sortable) с загруженной фотографией и некоторыми кнопками в качестве таких действий, как вращение и установка в качестве основного, под ним есть вход для установки заголовка pi c. Проблема, с которой я столкнулся, заключается в том, что в мобильном телефоне я не могу использовать вводимый текст заголовка, потому что функциональность перетаскивания вступает во владение и не позволяет мне что-то вводить. Как я могу разрешить вводить этот вводимый текст?

Я использую Jquery UI сортируется и jquery UI Touch Punch

мой код галереи выглядит следующим образом:

<ul id="uploaded_image" class="media-gallery list-inline">
    @if(count($data))
      @foreach($data as $item)
      @php
        $fileName = $directory. "/". $item->foto;
      @endphp
        <li class="file-column" id="{{$item->item_id}}">
          <div class="wrapper">
            <div class="foto-container">
              <div onClick="confirmDeletePhoto('{{$item->item_id}}')" class="delete-file" data-id="{{$item->item_id}}" data-file="{{$fileName}}"><i class="fa fa-close"></i></div>
              <div class="dragDrop" title="Arrastre y suelte para ordenar"><i class="fa fa-bars"></i></div>
              <img class="img-responsive" src="{{ url("images/photo_upload_edit/".session()->get("current_upload_scenario")."/".$directory."/".$item->foto."?time=".time()) }}" alt="foto">
              <div class="file-toolbar text-center">
                    <button type="button" class="btn btn-info btn-xs btnRotate" data-foto-id="{{$item->item_id}}"><i class="fa fa-rotate-right"></i> rotar</button>
                    <button type="button" class="btn btn-info btn-xs btnSetAsPrincipal" data-foto-id="{{$item->item_id}}"><i class="fa @if($item->principal) fa-star @else fa-star-o @endif"></i> principal</button>
              </div>
            </div>
            <div class="title @if($item->title) ok @endif">
              <input data-foto-id="{{$item->item_id}}" value="{{$item->title}}" type="text" class="form-control foto-title" placeholder="Titulo de la foto">
            </div>
          </div>
        </li>
      @endforeach
    @endif
</ul>

У вас, ребята, есть идея, как я могу решить эту проблему? Заранее спасибо

Answer 1

Решение, которое я обнаружил позже при поиске вопросов, подобных моему, было простым, просто добавьте draggable = false к элементу, который вы хотите использовать, независимо от перетаскивания контейнера.

В моем случае элемент был следующим:

<input **draggable=false** data-foto-id="{{$item->item_id}}" value="{{$item->title}}" type="text" class="form-control foto-title" placeholder="Titulo de la foto">

Надеюсь, это поможет:)