可排序和序列化答案

【问题标题】：Sortable and Seralize可排序和序列化
【发布时间】：2016-08-05 01:47:03
【问题描述】：

我有一个非常简单的按钮列表示例，可以将其拖到列表中。

我需要将添加到列表中的项目传递给我的数据库，但我的 ajax 出现问题，因为在删除按钮后的控制台中，GET 数组仍然为空。

我是 Jquery 的新手，我一直在到处寻找答案，所以如果有人能告诉我我错过了什么，我将不胜感激

代码如下：

    <!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <title></title>
    <meta charset="utf-8" />

        <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/fonts/style.css">
        <link rel="stylesheet" href="assets/css/main.css">

        <style>
        .row {
    display: block;
    width: 100%;
    height: auto;
}
.button {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 8px 15px;
    border: 1px solid #ccc;
    text-align: center;
    background: #eee;
}

.dropme {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
}

.dropme div {
    display: block;
    width: 150px;
    border: 1px solid #ccc;
}

.highlight {
    padding: 5px;
    border: 2px dotted #fff09f;
    background: #fffef5;
}
    </style>

    </head>

     <body class="layout-boxed bg_style_2">

<div class="row">
    <div class="button" data-item="10">Item 10</div>
    <div class="button" data-item="11">Item 11</div>
    <div class="button" data-item="12">Item 12</div>
</div>

<div class="dropme">
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
    <div>List Item 4</div>
    <div>List Item 5</div>

</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>  
<script src="assets/js/main.js"></script> 

<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY --> 
<script src="assets/js/jquery.sortable.js"></script>
<script>
$('.button').draggable({
    cursor: 'pointer',
    connectWith: '.dropme',
    helper: 'clone',
    opacity: 0.5,
    zIndex: 10
});

$('.dropme').sortable({
    connectWith: '.dropme',
    cursor: 'pointer'
}).droppable({
    accept: '.button',
    activeClass: 'highlight',
    drop: function(event, ui) {
        var $li = $('<div>').html('List ' + ui.draggable.html());
        $li.appendTo(this);
    }
})        

var data = $('.dropme').sortable('serialize');
        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'GET',
            url: 'scripts/enroll_myt.php'
        });
;

</script>

非常感谢您的关注！

【问题讨论】：

为什么dropme和dropme相连？此外，您提供的代码底部的杂散分号属于 var data = ... 之前的结束括号之后。我怀疑不合适的分号可能会抛出一些东西。

标签： jquery serialization draggable jquery-ui-sortable

【解决方案1】：

我冒昧地创建了一个分解主要概念的 JSFiddle... 你很接近。基本上，序列化会将 div ID 字符串化（您的代码 sn-p 中缺少这些 ID）。

$(".dropme").sortable({
    cursor: 'pointer'
}).droppable({
    accept: '.button',
    activeClass: 'highlight',
    drop: function(event, ui) {
        var $li = $('<div>').html("List " + ui.helper.text()).attr("data-button-id", ui.helper.find("div").attr("id"));
        $li.appendTo(this);
    }
});

$('.button').draggable({
    cursor: 'pointer',
    helper: function() {
        return $("<div class='help' />").append($(this).clone().removeClass("button"));
    },
    opacity: 0.75,
});

$("#send-btn").click(function() {
    var arr = [];
    $(".dropme div").each(function() {
        arr.push($(this).attr("data-button-id"));
    });

    alert(arr);
});

查看here。

【讨论】：

嗨布莱克，很抱歉吸收速度很慢，但在你的小提琴中，当按钮或添加或控制台中没有任何内容表明数据数组已更改时，我没有看到警报更改。我读错小提琴了吗？
再次查看。这次试着把它说得超级清楚。基本上，我修改了可拖动的助手，因此它包装了实际的按钮
数据，并在放置时在 droppable/sortable 中创建了一个新行，它将按钮的 ID 保留在数据属性 (data-button-id) 中。当您点击“发送”按钮时，我只需在 .dropme 中查找所有子 div，循环遍历每个并将每个 data-button-id 值添加到数组中，然后提醒整个数组。您还可以将它们作为字符串推送到数组中，这将与您将结果发送到的服务器很好地配合使用。希望有帮助