【发布时间】：2020-03-21 18:35:10
【问题描述】：
我正在制作具有可排序列表的 php 网站的移动版本。
li 标签内有三个 div，第一个和第二个是可点击的，应该会打开一个模态窗口。
<ul id='sortable'>
//...multiple li tags
<li class='ui-state-default row'>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
<i class='fas fa-edit iconeScheda'></i>
</div>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
<i class='fas fa-trash-alt iconeScheda'></i>
</div>
<div class='col-sm-10 col-xs-10'>
<b>Name of exercise</b>
</div>
</li>
//...
</ul>
在桌面浏览器上一切正常，但在移动设备上，这两个 div 不可点击，并且模式无法打开。
如果我删除可排序的模式，模式也会在移动设备上打开。
我的头部标签如下所示：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
function modificaModale(id) {
//do stuff
}
function eliminaModale() {
//do stuff
}
$(function () {
$("#sortable").sortable({
axis: 'y',
type: 'li',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'some url'
});
}
});
});
</script>
</head>
还有那些风格
#sortable { list-style-type: none; margin: 0; padding: 0; cursor: grab;}
#sortable li span { position: absolute; margin-left: -1.3em; }
.iconeScheda{
cursor:pointer;
font-size: 20px;
padding: 5px;
font-weight: 100;
}
我的一个模态是这样的（另一个几乎一样）
<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
<div class="modal-dialog">
<div class="modal-content">
<form action="eliminaScheda.php" method="post">
<input type="text" name="id" id="idElimina" style="display:none"/>
<div class="modal-header">
<h3>Elimina</h3>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
</div>
<div class="modal-footer">
<input type="submit" value="Conferma"/>
<input type="button" data-dismiss="modal" value="Annulla"/>
</div>
</form>
</div>
</div>
</div>
没有“可排序”ID，模态框会正常打开。 以下是网络图片： desktop version here 和手机版： mobile version here
提前致谢
【问题讨论】：
-
如果 sortable 在移动设备上不工作，你可以试试stackoverflow.com/questions/20726701/…
-
感谢@NiravJoshi，但可排序的工作正常，可排序标签内的模态按钮在移动设备上不起作用
-
感谢您的 codepen，我意识到由于 它无法正常工作
-
好的，那么你可以接受答案:)
-
对不起@niravjoshi，但这不是正确的答案，当您在智能手机上打开 codepen 时，它不再可排序
标签： php jquery mobile html-lists jquery-ui-sortable