Jquery 用户界面问题,can';t在mobile上的输入字段中键入,因为父容器是可拖动可排序的
我正在为一个客户端构建一个多照片上传小部件,允许他使用ajax上传照片,上传后的组件在网格中列出照片,这些照片基本上在一个div容器中(即拖放/排序),该容器上载了照片,加上一些按钮,作为旋转和设置为主操作,下面有一个设置图片标题的输入 我遇到的问题是,在手机中,我不能使用标题输入文本,因为拖放功能占据了主导地位,不允许我输入内容 我如何允许键入此输入文本 我正在使用jQueryUISortable和jQueryUITouchPunch 我的画廊代码如下:Jquery 用户界面问题,can';t在mobile上的输入字段中键入,因为父容器是可拖动可排序的,jquery,jquery-ui,jquery-ui-sortable,Jquery,Jquery Ui,Jquery Ui Sortable,我正在为一个客户端构建一个多照片上传小部件,允许他使用ajax上传照片,上传后的组件在网格中列出照片,这些照片基本上在一个div容器中(即拖放/排序),该容器上载了照片,加上一些按钮,作为旋转和设置为主操作,下面有一个设置图片标题的输入 我遇到的问题是,在手机中,我不能使用标题输入文本,因为拖放功能占据了主导地位,不允许我输入内容 我如何允许键入此输入文本 我正在使用jQueryUISortable和jQueryUITouchPunch 我的画廊代码如下: <ul id="upl
<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>
@如果(计数($数据))
@foreach($数据作为$项)
@php
$fileName=$directory。"/". $项目->foto;
@endphp
-
获取(“当前上传场景”)。“/”$directory。”/“$item->foto。”?time=“.time())}”alt=“foto”>
罗塔
主要的
@endforeach
@恩迪夫
如何解决这个问题?我后来在搜索类似于我的问题时发现的解决方案很简单,只需将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">
希望这些有帮助:)我后来在搜索类似于我的问题时发现的解决方案很简单,只需将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">
希望这些帮助:)欢迎。请提供一个最小的、可复制的示例:无需,我更改了google关键字并找到了其他来源来解决此问题,解决方案是在要使用的元素上设置draggable=false以允许拖动。在我的例子中,我只是将输入设置为带有draggable属性的标题所在位置等于false。就是这样。希望这能帮助其他人解决这个问题。请提供一个最小的、可重复的例子:没有必要,我改变了谷歌关键词并找到了其他来源来解决这个问题,解决方案是在你想要使用的元素上设置draggable=false,除了允许拖动。在我的例子中,我只是将输入设置为在此之前,我持有属性为draggable等于false的标题。就是这样。希望这能帮助其他人解决这个问题