Ruby on Rails + Jquery: Saving data from draggable lists

Question

Hello. I'm trying to save data to the MySQL database in Rails when the user drags items from different lists. I'm using the below Jquery script and HTML:

<script>
 $(document).ready(function() {
 $("#draggable").draggable( { connectToSortable: 'ul#myList', helper:'clone' } );
 $("#myList").sortable();

});
</script>

HTML:

<ul>
  <li id="draggable">Drag me to myList</li>
</ul>

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

I've been Googling for the last few hours but can't seem to find how to save data between multiple lists using Rails. Any idea?

Answer 1

You need to let the server side code be aware of the changes. You can use the stop event for sortable to do an ajax call, like so:

<script>
    $(document).ready(function() {
        $("#draggable").draggable({
            connectToSortable: 'ul#myList',
            helper:'clone'
        });

        $("#myList").sortable({
            stop: function(event, ui){
                //put your AJAX call here
            }
        });
    });
</script>

Then you have to set up an appropriate server-side action to respond to that AJAX response and update the appropriate data in your database. As far as the code you've shown goes, it's only modifying the DOM structure in the browser, it's not doing anything server-side, which is where the data lives.