用户界面问题，由于父容器是可拖动的可排序的，因此无法在移动设备上的输入字段中键入

Question

为客户端创建多张照片上传小部件，使他可以使用ajax上传照片，上传后的组件将照片列出在网格中，这些照片基本上位于div容器内（其中是拖放/可排序的）上传的照片以及一些按钮（例如旋转和设置为主按钮）以及在其下方的输入，用于设置图片标题。我的问题是，在移动设备中时，我无法使用标题输入文本，因为拖放功能会接管而不会让我输入内容。我如何允许输入此输入文本？

我正在使用Jquery UI可排序和jquery ui触摸打孔

我的画廊代码如下：

<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">

希望这些帮助：）