Question

我找到了几个可排序的示例，并且能够保存到数据库，但我想对多个列表项进行排序，然后保存到数据库中。

我尝试编辑下面的代码以允许此操作，但是我被卡住了。我可以移动多个项目，但它只识别单个项目的移动，所以假设我需要做某种foreach项目移动但是很难。

另外，我在下面的代码中发现了一个错误，似乎无法修复它。如果我突出显示一个项目并将它们拖到框之间，它们就会消失，并且不会显示任何一个列表。

我想要做的另一件事是移动完成后删除所选项目上的.selected类，我再也无法做到这一点。

<ul id='sortable1' class='connectedSortable'>
  <li id='item1'>Item 1</li>
  <li id='item2'>Item 2</li>
  <li id='item3'>Item 3</li>
  <li id='item4'>Item 4</li>
  <li id='item5'>Item 5</li>
</ul>

<ul id='sortable2' class='connectedSortable'>
  <li id='item6'>Item 6</li>
  <li id='item7'>Item 7</li>
  <li id='item8'>Item 8</li>
  <li id='item9'>Item 9</li>
  <li id='item10'>Item 10</li>
</ul>

<ul id='sortable3' class='connectedSortable'>
  <li id='item11'>Item 11</li>
  <li id='item12'>Item 12</li>
  <li id='item13'>Item 13</li>
  <li id='item14'>Item 14</li>
  <li id='item15'>Item 15</li>
</ul>

$(".connectedSortable li").click(function() {
    $(this).toggleClass("selected");
});
$("ul.connectedSortable").sortable({
    connectWith: "ul.connectedSortable",
    start: function(e, info) {
        info.item.siblings(".selected").appendTo(info.item);
    },
    stop: function(e, info) {
        info.item.after(info.item.find("li"))
    },

    update: function () {
        var order1 = $('#sortable1').sortable('toArray').toString();
        var order2 = $('#sortable2').sortable('toArray').toString();
        var order3 = $('#sortable3').sortable('toArray').toString();

        alert("Order 1:" + order1 + "\n Order 2:" + order2 + "\n Order 3:" + order3); //Just showing update
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: "order1=" + order1 + "&order2=" + order2 + "&order3=" + order3,
            dataType: "json",
            success: function (data) {

            }
        });
    }
});

我创建了一个jsFiddle：https://jsfiddle.net/MarcellusWallis/d8exp006/1/

jQuery多个可排序保存到数据库

0 个答案: