0

如何在 JQuery 中刷新可放置/可排序的容器？我有一个带有占位符列表项的有序列表，当用户删除列表项时，占位符被替换。如果丢弃的项目的顺序正确，它将显示一条消息并且用户可以继续前进，但如果不正确，他们会收到并警告它不正确，此时我希望容器删除列表以开始超过。我试过$('#bin ol').remove('li');了，但它不允许我开始将物品放回容器中。有没有一种简单的方法可以做到这一点？

HTML

<article id="answers">

        <ul>
            <li><a draggable="true" href="#" id="one" name="change" class="imgHvr"></a></li>
            <li class="spaced"><a draggable="true" href="#" id="two" name="obst" class="imgHvr"></a></li>
            <li><a draggable="true" href="#" id="three" name="journey" class="imgHvr"></a></li>
        </ul>

        <div id="bin">
            <div class="ui-widget-content">
            <hr id="topBorder"></hr>
            <h2></h2>
                <ol>
                    <li id="uno" draggable="false" class="placeholder">Add Items Here</li>
                </ol>
            <hr id="bottomBorder"></hr>
            </div>
        </div>

        </article>

jQuery

enter code here$(function() {
var limit = 3;
var counter = 0;
var answerKey = ["journey", "obst", "change"];
var answers = [];

$("#bin ol").sortable({cancel: '.placeholder' });
$("#answers li").draggable({
    appendTo: "body",
    helper: "clone",
    cancel: '.placeholder'
});
$("#bin ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        counter++;
        if (counter == limit) {
            $(this).droppable("disable");
        }
        $(this).find(".placeholder").remove();
        ui.draggable.clone().appendTo(this);

        $(this).find("#one").attr("id", "one_1");
        $(this).find("#two").attr("id", "two_1");
        $(this).find("#three").attr("id", "three_1");
    }
});

$("#subBtn").click(function() {
    var answers = [];
$('#bin a').each(function() {
    answers.push($(this).attr('name'));
}); 

if (arraysEqual(answerKey, answers)) {
    $("#bin ol").append('<a href="index.html" name="modal"><img id="correct" src="images/visSelect/seq_correct.png"></a>');
    $("#submitBtn input").attr('disabled', 'disabled');
}else{
    alert('Please Try Again');
    /* $('#bin ol').remove('li'); */
}

});
4

1 回答 1

1

我建议这样做：

if (arraysEqual(answerKey, answers)) {
    $("#bin ol").append('<a href="index.html" name="modal"><img id="correct" src="images/visSelect/seq_correct.png"></a>');
    $("#submitBtn input").attr('disabled', 'disabled');
}else{
    alert('Please Try Again');
    $('#bin ol').html(create_droppable());
}

function make_droppable(){
    return '<li id="uno" draggable="false" class="placeholder">Add Items Here</li>';
}

然后如果可能的话，添加onload="$('#bin ol').html(create_droppable());"到你的身体标签。

于 2012-12-05T16:09:43.973 回答