Question

我确定这已被问了一百万次，但我找不到答案。我有一个项目列表，我希望用户能够放入几个桶中的任何一个，然后能够将结果发布到数据库。

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。这一切都按预期工作。我想要做的是有一个保存按钮，当用户点击时，我可以序列化正确的div中的所有输入，并填充数据库。

问题是无论我在var数据的选择器中放入什么，我得到空帖...

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

Answer 1

我认为序列化的表现并不像你期望的那样。看看这个小提琴输出到控制台的内容：

http://jsfiddle.net/xp6Fv/

HTML：

<div id='rodents' class='bucket'><li id='dog'>Dog</li></div>

JS：

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

Serialize通常用于表单，而不是vanilla div和list元素。

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

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

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

使用jquery重新排序带有droppable和sortable的页面

1 个答案:

HTML：

JS：