1

非常に単純なドラッグ アンド ドロップ クイズを作成しました。ユーザーは 8 つのアクションのリストを正しいドロップ領域 (3 つのドロップ領域があります) にドラッグする必要があります。したがって、2 つまたは 3 つのアイテムが 1 つのドロップ可能な div にドロップされる可能性があります。

これは、アクションが下にスタックするのではなく、前にドロップされたアクションの上にドラッグされることを除いて、正常に機能します。

ui.draggable.position で使用するオプションの決定的なリストが見つからないようです。これは、ドロップを配置するために現在使用しているコードです。

    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );

しかし、上で述べたように、それらは前のドロップの上に配置されるだけです。

以下は、1 つのドラッグ可能領域にドラッグされた 2 つのアイテムによって生成されているスタイルです。2 番目の要素に -50px の上余白を追加しているため、背後にあります。どうすればこれを止めることができますか?:

最初のドラッグ可能な div:

<div id="section1" class="ui-draggable correct ui-draggable-disabled ui-state-disabled" style="position: relative; z-index: 8; left: 410px; top: 0px;" aria-disabled="true">Use one measure of soap</div>

2 番目のドラッグ可能な div:

<div id="section1" class="ui-draggable correct ui-draggable-disabled ui-state-disabled" style="position: relative; z-index: 9; left: 410px; top: -50px;" aria-disabled="true">Rinse thoroughly (fingers/thumbs/wrists)</div>

それが理にかなっていることを願っています。

デモアプリはこちら: デモアプリへのリンク

これらを適切にスタックする方法を誰かが光を当てることができますか?

非常に感謝アラン

4

1 に答える 1

1

移動の代わりにドラッグ アンド ドロップ処理のクローンを再考しなくても、このようにすることができます。

まず、より多くの要素に同じ ID を複数回使用しないでください。代わりにクラスまたはデータ属性を使用してください。次の例では、 という属性を使用していますsection。

ドロップ機能で、同じセクションに既にドロップされている他の要素があるかどうかを確認します。アイテムをドロップするとクラスが追加されるcorrectため、番号を取得してトップの位置をインクリメントできます。

            var addTop=$( "div .correct[section='"+slotNumber+"']").length*70;

            ui.draggable.addClass('correct');
            ui.draggable.draggable('disable');

            ui.draggable.position({
                of: $(this),
                my: 'left top+'+addTop,
                at: 'left top'
            });

コード：

$(document).ready(function () {

    var correctCards = 0;
    $(init);

    function init() {

        // Hide the success message
        $("#next_area_full").hide();

        // Reset the game
        correctCards = 0;
        $('#dragPile').html('');
        $('#dragSlots').html('');

        // Create the pile of shuffled cards
        var numbers = [1, 2, 3, 4, 5, 6, 7, 8];
        var sections = [1, 1, 1, 2, 2, 2, 3, 3];
        var percent = ['Use one measure of soap',
            'Rinse thoroughly (fingers/thumbs/wrists)',
            'Wet hands before applying soap',
            'Use correct amount of product',
            'Ensure thorough wetness',
            'Rub in quickly and vigorously',
            'Use hand cream',
            'Wear gloves for cleaning equipment'];

        for (var i = 0; i < 8; i++) {
            $('<div>' + percent[i] + '</div>').data('number', numbers[i]).attr('section', 'section' + sections[i]).appendTo('#dragPile').draggable({
                containment: '#content',
                stack: '#dragPile div',
                cursor: 'move',
                revert: true
            });
        }

        // Create the drag slots
        var dsections = [1, 2, 3];
        var words = ['Drag here'];
        for (var i = 0; i <= 2; i++) {
            $('<div>' + words + '</div>').data('number', i).attr('section', 'section' + dsections[i]).appendTo('#dragSlots').droppable({
                accept: '#dragPile div',
                hoverClass: 'hovered',
                drop: handleCardDrop
            });
        }

    }

    function handleCardDrop(event, ui) {
        var slotNumber = $(this).attr('section');
        var cardNumber = ui.draggable.attr('section');

        // If the card was dropped to the correct slot,
        // change the card colour, position it directly
        // on top of the slot, and prevent it being dragged
        // again

        if (slotNumber == cardNumber) {

             var addTop=$( "div .correct[section='"+slotNumber+"']").length*70;

            ui.draggable.addClass('correct');
            ui.draggable.draggable('disable');

            ui.draggable.position({
                of: $(this),
                my: 'left top+'+addTop,
                at: 'left top'
            });

            ui.draggable.draggable('option', 'revert', false);
            correctCards++;
        }

        // If all the cards have been placed correctly then display a message
        // and reset the cards for another go

        if (correctCards == 5) {
            $("#next_area_full").fadeIn('slow');
        }

    }

})

デモ: http://jsfiddle.net/IrvinDominin/eDnnB/

于 2013-09-10T20:48:35.423 に答える