JS sortable POST 一起启动和更新功能？

Question

我想知道如何将当前列表和排序后的列表与POST一起发送？我得到的结果很好，把帖子只发送一个列表。问题是当前列表 VAR 在 UPDATE 之外。我怎样才能找到它？

<script type="text/javascript">

    $(".wrapper").sortable({
         handle: ".draghandler",
         connectWith: $('.wrapper'),
         distance: 100,
         opacity: 0.4, 
         cursor: 'move',
        
        start: function (event, ui) {
                
                var currentlist = new Array(); //Aktuális sorrend lista
                $('.draghandler').each(function() {
                currentlist.push($(this).attr("id"));
                $('#currentlist').html(currentlist);
                    
                });     
                },
        
        update: function (event, ui) {

                var newsortedlist = new Array(); //Átrendezett lista
                $('.draghandler').each(function() {
                newsortedlist.push($(this).attr("id"));
                });
                
                
                $('#newsortedoutput').html(newsortedlist);
                //$('#responsefromserver').html('Rendezés mentése folyamatban');
            
**//'currentid': currentlist is outside of update:function, it is in start:function, therefore it dosen't send.**

                $.post('/megrendelesek/sortmouse.php',{'currentid': currentlist, 'sortid': newsortedlist}, function(theResponse){
                $('#responsefromserver').html(theResponse);
                    });
                                    }
    
        });
        $(".wrapper").disableSelection();
        $(".draghandler").disableSelection();   

    
    
</script>

<div id="currentlist"></div>
<div id="newsortedoutput"></div>
<div id="responsefromserver"> </div>

Answer 1

要执行您需要的操作，您需要将 currentlist 存储在两个函数处理程序的范围内。全局变量可以做到这一点，但这是不好的做法。

更好的方法是将数组存储在相关 .wrapper 容器的 data 属性中。然后您可以在任何需要的地方访问它。

另请注意，您可以使用 map() 函数简化从拖动手柄 id 属性创建数组的过程。

$(".wrapper").sortable({
  handle: ".draghandler",
  connectWith: $('.wrapper'),
  distance: 10, // reduced to 10 to make this demo easier to use
  opacity: 0.4,
  cursor: 'move',
  start: function(e, ui) {
    var currentlist = $('.draghandler').map((i, el) => el.id).get();
    $(e.target).closest('.wrapper').data('currentlist', currentlist);
    $('#currentlist').html(currentlist);
  },
  update: function(e, ui) {
    var currentlist = $(e.target).closest('.wrapper').data('currentlist');
    var newsortedlist = $('.draghandler').map((i, el) => el.id).get();
    $('#newsortedoutput').html(newsortedlist);

    // Commented as the AJAX call will cause an error in an SO snippet...
    /* 
    $.post('/megrendelesek/sortmouse.php', {
      'currentid': currentlist,
      'sortid': newsortedlist
    }, function(theResponse) {
      $('#responsefromserver').html(theResponse);
    });
    */
  }
});

$(".wrapper").disableSelection();
$(".draghandler").disableSelection();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/jquery-ui-git.css" />

<div class="wrapper">
  <div class="item">
    Foo
    <div class="draghandler" id="item-1">DRAG</div>
  </div>
  <div class="item">
    Foo
    <div class="draghandler" id="item-2">DRAG</div>
  </div>
  <div class="item">
    Foo
    <div class="draghandler" id="item-3">DRAG</div>
  </div>
</div>
<br />
<div id="currentlist"></div>
<div id="newsortedoutput"></div>
<div id="responsefromserver"> </div>

JS sortable POST 一起启动和更新功能？

JS sortable POST start and update function together?

html

jquery

post

jquery-ui-sortable