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());"body タグに追加します。

于 2012-12-05T16:09:43.973 に答える