title: To see which id's data drag and drop in multiconnect operation in jquery sortable
body: <p>I am doing sorting with jquery ui's sortable function. I have a problem. Anyone can help me?
  for example, when I take a li from #sortable2 and move it to #sortable1, I want to assign the value 0 to the variable state and 1 when I move it from #sortable1 to #sortable2.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $("#sortable1, #sortable2").sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  
    $("#sortable2").sortable({
      update: function(event, ui) {
        $(this).children().each(function(index) {
          if ($(this).attr('data-position') != (index + 1)) {
            $(this).attr('data-position', (index + 1)).addClass('updated');
          }
        })
        saveNewPositions();
      }
    }).disableSelection();
  });
  
  function saveNewPositions() {
    var positions = [];
    $('.updated').each(function() {
      positions.push([$(this).attr('data-index'), $(this).attr('data-position'), $(this).attr('data-type')]);
      $(this).removeClass('updated');
    })
  
    $.ajax({
      url: SITE_URL + 'standart/islem.php?page=sortable',
      method: 'POST',
      dataType: 'text',
      data: {
        positions: positions,
        pageID: 1,
      },
      success: function(data) {
        data = data.split(":::", 2);
        var message = data[0],
          answer = data[1];
      }
    })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;ul id="sortable1" class="connectedSortable"&gt;
    &lt;li data-index="1" data-position="1"&gt;first row&lt;/li&gt;
    &lt;li data-index="2" data-position="2"&gt;second row&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="sortable2" class="connectedSortable"&gt;
    &lt;li data-index="1" data-position="1"&gt;2. first row&lt;/li&gt;
    &lt;li data-index="2" data-position="2"&gt;2. second row&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>