Блог

Я хотел бы знать, как я могу отправить текущий список и отсортированный список вместе с POST? Я хорошо получил результаты, отправил отправку только одного списка. Проблема в том, что переменная currentlist находится за пределами 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>
 

Чтобы делать то, что вам требуется, вам нужно хранить currentlist в пределах области действия обоих обработчиков функций. Глобальная переменная могла бы это сделать, но это плохая практика.

Лучшим подходом было бы сохранить массив в data атрибуте в соответствующем .wrapper контейнере. Затем вы можете получить к этому доступ везде, где это необходимо.

Также обратите внимание, что вы можете использовать эту 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>