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

Posted 2023-05-08

【中文标题】用户界面问题，无法在移动设备上输入输入字段，因为父容器是可拖动可排序的

【英文标题】：user interface issue, can't type in input field on mobile because parent container is draggable sortable

【发布时间】：2020-05-23 07:39:49

【问题描述】：

我正在为一个客户端构建一个多张照片上传小部件，让他使用 ajax 上传照片，上传后的组件在网格中列出照片，这些照片基本上是在一个 div 容器 （这是拖动/drop/sortable)，其中上传了照片以及一些按钮，如旋转和设置为主，下面有一个输入来设置图片的标题。

我遇到的问题是，在移动设备中我无法使用标题输入文本，因为拖放功能会接管并且不允许我输入内容。

我如何允许输入此输入文本？

我正在使用 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()) " >
              <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>

我该如何解决这个问题？

【问题讨论】：

欢迎。请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example

不需要，我改变了google关键字并找到了其他来源来解决这个问题，解决方案是在您要使用的元素上设置draggable=false，并允许拖动。在我的情况下，我只是将输入设置为我持有标题的属性可拖动等于 false。就是这样。希望这可以帮助其他人解决问题

【参考方案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">

希望这些帮助:)