Create a Trello like experience in PHP with Sortable and AJAX

main.php

<div class="container-fluid kanban-container">
  <div class="row">
    <!-- List A -->
    <div class="col-12">

      <!-- Card -->
      <div class="card">
        <div class="card-header card-header-flush">

          <!-- Title -->
          <h4 class="card-header-title">
            List A
          </h4>

        </div>
        <div class="card-body">

          <!-- Category -->
          <div id="list_a" class="item-kanban">

            <div id="a1" class="kanban-item">
              <div class="card card-sm mb-3">
                <div class="card-body">

                  <!-- Body -->
                  <p>
                    Title for item
                  </p>

                  <!-- Footer -->
                  <div class="row align-items-center">
                    <div class="col">

                      <p class="card-text small text-muted">
                        Something here
                      </p>

                    </div>
                    <div class="col-auto">

                      <p class="card-text small text-muted">
                        And here
                      </p>

                    </div>
                  </div> <!-- / .row -->

                </div>
              </div>
            </div>

          </div>


        </div>
      </div>

    </div>

    <!-- List B -->
    <div class="col-12">

      <!-- Card -->
      <div class="card">
        <div class="card-header card-header-flush">

          <!-- Title -->
          <h4 class="card-header-title">
            List B
          </h4>

        </div>
        <div class="card-body">

          <!-- Category -->
          <div id="list_b" class="item-kanban">

            <div id="b1" class="kanban-item">
              <div class="card card-sm mb-3">
                <div class="card-body">

                  <!-- Body -->
                  <p>
                    Title for item
                  </p>

                  <!-- Footer -->
                  <div class="row align-items-center">
                    <div class="col">

                      <p class="card-text small text-muted">
                        Something here
                      </p>

                    </div>
                    <div class="col-auto">

                      <p class="card-text small text-muted">
                        And here
                      </p>

                    </div>
                  </div> <!-- / .row -->

                </div>
              </div>
            </div>
            <div id="b2" class="kanban-item">
              <div class="card card-sm mb-3">
                <div class="card-body">

                  <!-- Body -->
                  <p>
                    Title for item
                  </p>

                  <!-- Footer -->
                  <div class="row align-items-center">
                    <div class="col">

                      <p class="card-text small text-muted">
                        Something here
                      </p>

                    </div>
                    <div class="col-auto">

                      <p class="card-text small text-muted">
                        And here
                      </p>

                    </div>
                  </div> <!-- / .row -->

                </div>
              </div>
            </div>

          </div>


        </div>
      </div>

    </div>
    

  </div> <!-- / .row -->
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<script>

  function moveItem(id,target) {
    jQuery.ajax({
      type:"POST",
      data: {
        id:id,
        target:target
      },
      url:"../moveitem.php",
      success: function(results){
        //use the function below to debug the results
        //console.log(results)
      }
    });

  }

  var options = {
    group: 'shared', // set both lists to same group
    animation: 150,
    onEnd: function (evt) {
      let id = evt.item.id
      let target = evt.to.id;
      moveItem(id,target)
    },


  };

  Sortable.create(list_a, options);
  Sortable.create(list_b, options);

</script>

moveitem.php

<?php

// Maybe do something with nonce here

$target = substr($_POST['target'], 5, 999999);
$id = $_POST['id'];

// now you have the two variables that you can do whatever with below here...




// End the script with die.
die;