Question

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

我需要将添加到列表中的项目传递给我的数据库，但是我的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>

非常感谢您寻找！

Answer 1

我冒昧地创建了一个破坏主要概念的JSFiddle ......你很亲密。基本上，序列化将字符串化div ID（代码片段中缺少这些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。

可排序和Seralize

1 个答案: