Jquery UI Saving Sortable List

JQuery UI Saving Sortable List

$("#list").live('hover', function() {
        $("#list").sortable({

            update : function () {

                var neworder = new Array();

                $('#list li').each(function() {    

                    //get the id
                    var id  = $(this).attr("id");
                    //create an object
                    var obj = {};
                    //insert the id into the object
                    obj[] = id;
                    //push the object into the array
                    neworder.push(obj);

                });

                $.post("pagewhereyouuselist.php",{'neworder': neworder},function(data){});

            }
        });
    });

Then in your PHP file, or in this example "pagewhereyouuselist.php"

$neworderarray = $_POST['neworder'];
//loop through the list of ids and update your db
foreach($neworderarray as $order=>$id){    
    //you prob jave a connection already i just added this as an example
    $con = mysql_connect("host","username","password");

    if (!$con){
         die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("my_db", $con);

    mysql_query("UPDATE table SET order = {$order} WHERE id = {$id}");
    mysql_close($con);

}

that should do it
i didn't test it as it is an example connection. the actual script I am actually using is more specific to my program this is a simplified version to show the concept

jQuery Sortable - save order when new element dragged into list

Is there a simple way to do this or is it just a matter of coding up a
decent amount of jQuery and backend functions to manage this? I have
been hunting around the net for solutions but can't find anything all
that definitive.

Pretty much yes, but if you already know how to handle Ajax calls for sortables then mixing two lists is not an issue. I am using a modified version of the coding on this page. And I am using the receive event & the stop event to show how you can hook simple function into the basic sortable coding:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      receive: function( event, ui ) { alert('Receive!'); },
      stop: function( event, ui ) { alert('Stop!'); }
    }).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

</body>
</html>

So when an item is sorted and the sorting stops, a 'Stop!' alert box pops up. And when a new item is dragged into one list from another a 'Receive!' alert box pops up in addition to the stop. You might be able to just use the stop event to trigger an Ajax call, but the receive even can be useful to do something else if/when a new item is added to a list.

jQuery UI Sortable - saving order when button clicked

There is a builtin method for doing this. Refer serialize or toArray

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/539/

JS:

$(function () {
    $("#sortable").sortable({
        update: function (event, ui) {
            var order = $(this).sortable('serialize');

            $(document).on("click", "button", function () { //that doesn't work
                $.ajax({
                    data: order,
                    type: 'POST',
                    url: 'saverank.php'
                });
            });
        }
    }).disableSelection();
    $('button').on('click', function () {
        var r = $("#sortable").sortable("toArray");
        var a = $("#sortable").sortable("serialize", {
            attribute: "id"
        });
        console.log(r, a);
    });
});

How Can i save jquery sortable connected lists in database mysql?

Consider the following example.

jQuery(function($) {
  function sendData(api, data) {
    $.post(api, data, function(results) {
      console.log(results);
    });
  }
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    update: function(event, ui) {
      // This event is triggered when the user stopped sorting and the DOM position has changed.
      var inactive = $("#sortable1").sortable("serialize");
      var active = $("#sortable2").sortable("serialize");
      console.log(inactive, active);
      sendData("updateFruit.php", {
        inactive: inactive,
        active: active
      });
    }
  }).disableSelection();
});

.column {
  margin: 0;
  padding: 0;
  width: 200px;
  text-align: center;
  float: left;
}

.column h5 {
  padding: 0.4em;
  margin: : 0;
}

.column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.column ul li {
  padding: 0.4em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="column ui-widget">
  <h5>Inactive fruit</h5>
  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="fruit-1">Mango</li>
    <li class="ui-state-default" id="fruit-2">Orange</li>
    <li class="ui-state-default" id="fruit-3">Kewi</li>
  </ul>
</div>
<div class="column ui-widget">
  <h5>Active Market</h5>
  <ul id="sortable2" class="connectedSortable">
    <li class="ui-state-default" id="fruit-4">Banana</li>
  </ul>
</div>

save jquery ui-sortable positions to DB

make your HTML sortable, add javascript, and save to php on update.

<ul id="sortable">
    <li id="1">elem 1</li>
    <li id="2">elem 2</li>
    <li id="3">elem 3</li>
    <li id="4">elem 4</li>
</ul>

$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

jQuery UI Sortable, then write order into a database

The jQuery UI sortable feature includes a serialize method to do this. It's quite simple, really. Here's a quick example that sends the data to the specified URL as soon as an element has changes position.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

What this does is that it creates an array of the elements using the elements id. So, I usually do something like this:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

When you use the serialize option, it will create a POST query string like this: item[]=1&item[]=2 etc. So if you make use - for example - your database IDs in the id attribute, you can then simply iterate through the POSTed array and update the elements' positions accordingly.

For example, in PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

Example on jsFiddle.