ajax, jquery 可排序, 订单更新

Question

我想要实现的是通过更改概览中的“顺序”输入值来更新数据库中幻灯片的顺序（每行都有自己的输入）， 或通过拖动行。

所以我首先修复了这个输入，并将 ajax 请求放在一个函数中。此函数需要行本身和新的订单值，请参阅 ajax_order(row, newval);。

然后我将行排序并添加了一个 update: 函数：

$( ".rows-container" ).sortable();

$(".rows-container").sortable({
    update: function( ) {
        $('.rows-container').children().each(function(i, el){
            ajax_order($(this), i + 1);
            $(this).find('.overview-number').val(i+1);
        });
    }
});

现在我正在遍历行，并使用索引作为新的订单号。它工作正常，但是每次拖动 1 行时，它都会更新所有行.. 即使一行实际上保持在原位。

此外，如果保存了 30 张幻灯片（其中有几张可能被标记为不活动），则可能效率不高。有什么好方法可以做到这一点？对一些提示感到满意

更新：

当我将它添加到函数中时，它会在我开始拖动时为我提供当前（旧）顺序，而且还有 1 个额外的 console.log 'undefined'.. 所以现在我有 5 个 console.logs 并且只有 4 个实际行.如果我们不需要跟踪旧订单或使用 start 将是一件好事：

start: function(event, ui) {
    $('.rows-container').children().each(function(i, el){
        console.log($(this).find('.overview-number').val());
    });

},

更新：

所以我整晚都在困惑 xD zzzZZzz。一直在添加php函数并再次删除，添加存储旧订单+索引和shit的JS对象。在start：和stop中尝试了不同类型的数组：

它变得一团糟，所以我决定在纸上写下一些场景......并想出一个好方法是跟踪使用的最后一个“订单”。这是结果

$( ".rows-container" ).sortable();

$(".rows-container").sortable({

    update: function() {

        var last_val = 0;//used to compare with the next row and determine it's value
        //if the next row has lower value as the one before, it needs to become higher value
       //note that the view always gets loaded on order ASC 

        $('.rows-container').children().each(function(i){

            //the current row's order
            var current = parseInt($(this).find('.overview-number').val());

            if(i == 0 || current > last_val){ 

                if(current < last_val+5){ //row doesnt need update, yee!!!!
                    last_val = current;

                //makes sure the values dont add up too much, when the difference gets too big
                }else{
                    current = last_val+1;
                    ajax_order($(this), current);
                    $(this).find('.overview-number').val(current);
                    last_val = current;
                }

            //if the next row has lower value as the one before, it needs to become higher value
            }else if(current <= last_val){
                current = last_val+1;
                ajax_order($(this), current);
                $(this).find('.overview-number').val(current);
                last_val = current;
            }
        });
    },
});

像火车一样运行...但是您可以看到其中有一些重复，即运行 ajax 的部分。我尝试将其放入该对象的函数中并保持“last_value”和“current”可用，但尚未成功。

Answer 1

您可以将开始和结束位置传递给后端服务，然后在服务器上调整该范围内的记录。这样会更有效率：

var initialPos, finalPos;

$("#sortable")
  .sortable()
  .on("sortstart", function( event, ui ) {
     initialPos = ui.item.index() + 1; // when using a 1-based index    
     //console.log("Item started at position", initialPos);
  })  
  .on("sortupdate", function( event, ui ) {
     finalPos =  ui.item.index() + 1; // when using a 1-based index  	
     console.log(ui.item.attr('id'), "moved from position", initialPos, "to", finalPos);
    
     // call ajax function here, passing in initialPos & finalPos
     // server will need to re-order values for all elements between (and including) initialPos & finalPos
  });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="sortable">
  <li id="itm1">Item 1</li>
  <li id="itm2">Item 2</li>
  <li id="itm3">Item 3</li>
  <li id="itm4">Item 4</li>
  <li id="itm5">Item 5</li>
</ul>