用户界面问题,无法在移动设备上输入输入字段,因为 parent 容器是可拖动可排序的
user interface issue, can't type in input field on mobile because parent container is draggable sortable
我正在为客户构建一个多张照片上传小部件,让他使用 ajax 上传照片,上传后的组件在网格中列出照片,这些照片基本上在 div container (which is drag/drop/sortable) 上传了照片加上一些按钮作为旋转和设置为主要操作,下面有一个输入设置标题图
我遇到的问题是,在移动设备上,我无法使用标题输入文本,因为拖放功能接管了,不会让我输入内容。
我怎么允许输入这个输入文本?
我正在使用 jQuery UI sortable 和 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>
我该如何解决这个问题?
我后来搜索类似我的问题找到的解决方案很简单,只要在你想使用的元素上添加 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">
希望这些对您有所帮助:)
我正在为客户构建一个多张照片上传小部件,让他使用 ajax 上传照片,上传后的组件在网格中列出照片,这些照片基本上在 div container (which is drag/drop/sortable) 上传了照片加上一些按钮作为旋转和设置为主要操作,下面有一个输入设置标题图
我遇到的问题是,在移动设备上,我无法使用标题输入文本,因为拖放功能接管了,不会让我输入内容。
我怎么允许输入这个输入文本?
我正在使用 jQuery UI sortable 和 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>
我该如何解决这个问题?
我后来搜索类似我的问题找到的解决方案很简单,只要在你想使用的元素上添加 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">
希望这些对您有所帮助:)