Detecting which list items are dragged into using jquery

You’ve got to put the AJAX routine inside the button’s click handler :slight_smile:

This should get you started:

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sortable list</title>
    <style>
      #results { margin: 5px; padding: 5px; }
      ul > li { cursor: pointer }
    </style>
  </head>
  
  <body>
    <ul id="list_1" class="sortable connected">
      <li data-item="1">Image 1</li>
      <li data-item="2">Image 2</li>
      <li data-item="3">Image 3</li>
      <li data-item="4">Image 4</li>
      <li data-item="5">Image 5</li>
      <li data-item="6">Image 6</li>
    </ul>

    <ul id="list_2" class="sortable connected">
      <li data-item="1">Image 1</li>
      <li data-item="2">Image 2</li>
      <li data-item="3">Image 3</li>
      <li data-item="4">Image 4</li>
      <li data-item="5">Image 5</li>
      <li data-item="6">Image 6</li>
    </ul>

    <ul id="list_3" class="sortable connected">
      <li data-item="1">Image 1</li>
      <li data-item="2">Image 2</li>
      <li data-item="3">Image 3</li>
      <li data-item="4">Image 4</li>
      <li data-item="5">Image 5</li>
      <li data-item="6">Image 6</li>
    </ul>

    <button>Submit</button>
    <div id="results"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
      $('.sortable').sortable();
      $('.connected').sortable({
        connectWith: '.connected'
      });

      function getListOrder(){
        var params = [];
        $(".connected").each(function(){
          var items = [];
          $(this).children().each(function(){
            items.push("Item " + $(this).data("item"));
          })
          params.push(items);
        })

        return params;
      }

      function makeAjaxRequest(params){
        $.ajax({
          type: "POST",
          data: { lists: params },
          url: "process_ajax.php",
          success: function(res) {
            $("#results").html("<p>$_POST contained: " + res + "</p>");
          }
        });
      }

      $("button").on("click", function(){
        var params = getListOrder();
        makeAjaxRequest(params);
      })
    </script>
  </body>
</html>

process_ajax.php

<?php 
  // Database logic here

  echo '<pre>'; 
  print_r($_POST);
  echo '</pre>';
?>

Let me know how you get on

Pullo – You gave me some great help some time back and the script you helped me create is working great.

I’d like to modify it so that the ajax request, rather than being triggered by clicking a button, happens automatically every time an item is dragged and dropped.

I am not sure how to indicate the event trigger. The existing script follows:


 <script>
      $('.sortable').sortable();
      $('.connected').sortable({
        connectWith: '.connected'
      });
      
      function getListOrder(){
        var params = [];
        $(".connected").each(function(){
          //params.push($(this).data("gallery"))
          var items = [];
          $(this).children("li").each(function(){
            items.push($(this).data("item"));
          })
          params.push(items);
        })

        return params;
      }
		
		function makeAjaxRequest(params){
        $.ajax({
          type: "POST",
          data: { lists: params },
          url: "process_ajax.php",
          success: function(res) {
            $("#results").html("Gallery Content and order was updated, continue"); //"<p>$_POST contained: " + res + "</p>"
            $("#debug").html("Submit completed." + res);
          }
        });
      }

      $("#button").on("click", function(){
        var params = getListOrder();
        makeAjaxRequest(params);
      })
    </script>

How do I trigger the ajax request each time an item is dragged to a new list or dragged to change the sort order within a list?

Thanks,

–Kenoli

Hi,

How’s it going?

You should be able to hook into the stop event and fire the ajax request from there.