Ruby on Rails + Jquery: Saving data from draggable lists

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:

当用户从不同列表中拖动项目时，我正在尝试将数据保存到Rails中的MySQL数据库。我正在使用下面的Jquery脚本和HTML：

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

});
</script>

HTML:

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?

我在过去的几个小时里一直在谷歌搜索，但似乎无法找到如何使用Rails在多个列表之间保存数据。任何想法？

1 个解决方案

#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:

您需要让服务器端代码知道更改。您可以使用stop事件进行排序以执行ajax调用，如下所示：

<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.

然后，您必须设置适当的服务器端操作以响应该AJAX响应并更新数据库中的相应数据。就你所展示的代码而言，它只是在浏览器中修改DOM结构，而不是在服务器端做任何事情，这是数据存在的地方。