jQuery UI可按desc顺序设置为shortable

Question

这里有一个列表，我想根据DESC顺序缩短。类似10,9,8,7,6,5,4,3,2.1我的目标是更改数据id。但这里是从最低值开始的。我想从上限开始

jQuery('.photos').sortable({
stop: function(event, ui){
let myIncrementor = GetLowestDataIdValue(); //Custom value returned from function
$(".ui-sortable li").each(function(i, el){
$(el).attr('data-id',myIncrementor);
myIncrementor += 1; //increment it
});
}
});
function GetLowestDataIdValue(ui){
let lowestVal = -1;
$('.photos.ui-sortable').find('li').each(function(i, el){
if(parseInt($(el).attr('data-id')) < lowestVal || lowestVal === -1){
// alert(lowestVal);
lowestVal = parseInt($(el).attr('data-id'));
}
});
return lowestVal;
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<ul class="photos ui-sortable">
<li class="photo" data-id="21">pawal</li>
<li class="photo" data-id="22">sigma</li>
<li class="photo" data-id="23">notea</li>
<li class="photo" data-id="24">missouri</li>
<li class="photo" data-id="25">Ooops</li>
<li class="photo" data-id="26">Ratee</li>
</ul>

jsfiddle

Answer 1

您可以使用此问题的解决方案按降序排序，只需更改回调中元素的顺序(从b.dataset.id减去a.dataset.id(

$('.ui-sortable li').sort(function(a,b) {
return parseInt(b.dataset.id) - parseInt(a.dataset.id);
}).appendTo('.photos');

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<ul class="photos ui-sortable">
<li class="photo" data-id="21">pawal</li>
<li class="photo" data-id="22">sigma</li>
<li class="photo" data-id="23">notea</li>
<li class="photo" data-id="24">missouri</li>
<li class="photo" data-id="25">Ooops</li>
<li class="photo" data-id="26">Ratee</li>
</ul>

Answer 2

我解决了我的问题。这里我用了

myIncrementor -= 1;

已解决的代码在这里

jQuery('.photos').sortable({
stop: function(event, ui){
let myIncrementor = GetLowestDataIdValue(); //Custom value returned from function
$(".ui-sortable li").each(function(i, el){
$(el).attr('data-id',myIncrementor);
myIncrementor -= 1; //increment it
});
}
});
function GetLowestDataIdValue(ui){
let lowestVal = +1;
$('.photos.ui-sortable').find('li').each(function(i, el){
if(parseInt($(el).attr('data-id')) > lowestVal || lowestVal === +1){
// alert(lowestVal);
lowestVal = parseInt($(el).attr('data-id'));
}
});
return lowestVal;
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}

<ul class="photos ui-sortable">
<li class="photo" data-id="26">Ratee</li>
<li class="photo" data-id="25">Ooops</li>
<li class="photo" data-id="24">missouri</li>
<li class="photo" data-id="23">notea</li>
<li class="photo" data-id="22">sigma</li>
<li class="photo" data-id="21">pawal</li>





</ul>