我有一个ul
lis
这个ul是可排序的,但当我尝试排序时,选择整个ul
而不是lis
,请问有什么问题
<button class="rreorder-all btn btn-outline-primary dropdown-toggle" style="margin-left: 10px" id="saveReorder">
Reorder photos
</button>
<ul class="reorder row" style=" margin-left: 30px">
<form method="post" id="chk-all" class="row">
@foreach ($images as $image)
<li class="img-box" data-src="{{$image->filename}}" id="{{$image->id}}">
<input type="checkbox" name="chk[]" value="{{$image->id}}" class="chk" style="display: none;">
<div class="img-w" data-src="{{$image->filename}}" style="background-image: url('{{$image->filename}}')">
{{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify; display: inline;margin-left: 10px;">
{{$image->description}}
<i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i>
{{--<a href="{{route("settings.photos")."?delete=on?id=$image->id"}}">!--}}
<i class="far fa-trash-alt del1" id="{{$image->id}}" style="margin-left: 10px; color:#333333;cursor: pointer;float:right"></i>
</span>
</li>
@endforeach
</form>
</ul>
$('.rreorder-all').on('click', function() {
$("ul.reorder").sortable({
tolerance: "pointer",
helper: "clone"
});
$('.rreorder-all').html('save reordering');
$('.rreorder-all').attr("id", "saveReorder");
$('#reorderHelper').slideDown('slow');
$("ul.reorder").find('.img-w').attr("data-src", "");
$("ul.reorder").find('.img-w').css("cursor", "move");
$("#saveReorder").click(function(e) {
if (!$("#saveReorder i").length) {
$(this).html('').prepend('saving...');
$("ul.reorder").sortable('destroy');
$("ul.reorder").find('.img-w').css("cursor", "pointer");
$("#reorderHelper").html("Reordering Photos - This could take a moment. Please don't navigate away from this page.");
var h = [];
$("ul.reorder li").each(function() {
h.push($(this).attr('id'))
});
$("#reorderHelper").hide();
// alert(h);
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
margin-left: 10px;
}
.img-box {
float: left;
}
.clearfix {
clear: both;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
margin-left: 30px;
}
.fa-trash-alt:hover {
transform: scale(1.5);
}