JQuery UI сокращаемый набор по порядку desc - PullRequest
Новая
       10

JQuery UI сокращаемый набор по порядку desc

0 голосов
/ 16 ноября 2018

У меня есть список, который я хочу добавить в соответствии с заказом DESC.как 10,9,8,7,6,5,4,3,2,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;}
<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

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Вы можете отсортировать в порядке убывания, используя решение из этого вопроса , просто измените порядок элементов в обратном вызове (вычтите a.dataset.id из b.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>
0 голосов
/ 18 ноября 2018

Я решил свою проблему.Здесь я использовал 

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>
...