Javascript 使用jquery对具有可拖放和可排序的页面进行重新排序

我相信这个问题已经被问过无数次了，但我找不到答案。我有一个项目列表，我希望用户能够放入几个存储桶中的任何一个，然后能够将结果发布到数据库中

jquery：

$(function() {
  $( "#items li" ).draggable({
  appendTo: "body",
  helper: "clone"
});

 $( ".bucket" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
    var liId = ui.draggable.attr('id');
    $(this).append(liId);

    //remove item from original list
     ui.draggable.remove();

  }
  }).sortable({
  items: "li:not(.placeholder)",
  sort: function() {
    $( this ).removeClass( "ui-state-default" );
  }
});


  //button event

 $('#butSub').click (function()
 {
    var data = $('.bucket').serialize();
                            $.ajax({
                                            type: "POST",
                                            url: "page2.php",
                                            data: data,
                                            success: function(result)
                                            {
                                                    alert(result);  
                                            }
                                    });
  });

项目：

 <div id='items'>
 <li id='dog'>Dog</li>
 <li id='cat'>Cat</li>
 <li id='fish'>Fish</li>
 <li id='gerbil'>Gerbil</li>
 </div>

狗
猫
鱼
沙鼠

我有几个div可供选择：

 <div id='rodents' class='bucket'></div>
 <div id='pets' class='bucket'></div>
 <div id='critters' class='bucket'></div>


<input type='button' id='butSub' name='butSub' value='submit'>

我使用droppable可以将“狗”拖到宠物区。这一切都如预期的那样工作。我想做的是有一个保存按钮，当用户单击时，我可以将所有输入序列化到正确的div中，并填充一个db

问题是，无论我在var数据选择器中输入什么，我都会得到空的post

---

在page2.php的最后，我需要div，以及div中的所有项。

我认为serialize并没有按照您的预期运行。查看此小提琴输出到控制台的内容：

HTML: Serialize通常用于表单，而不是普通的div和list元素

我认为如果你做一些类似的事情会更容易：

var items = [];
$("#rodent").find(".item").each(function(item) {
    items.push(item.id);
});
var json = $.toJson(items);

---

然后，您可以通过网络发送JSON。

是否将输入（id=butsub）包装在标记中？我没有添加，也没有更改。find（“.item”）来自何方。任何地方都没有item类。@bart2puck将添加到

items

div中的每个

li

元素。

console.log($("#rodents").serialize());

var items = [];
$("#rodent").find(".item").each(function(item) {
    items.push(item.id);
});
var json = $.toJson(items);