1

我创建了一个非常简单的拖放测验，其中用户有一个包含 8 个操作的列表，他们必须将它们拖到正确的放置区域（有 3 个放置区域）。所以我可能有 2 或 3 个项目被拖放到一个可放置的 div 上。

这很好用，只是动作被拖到前一个拖放动作的顶部，而不是堆叠在下面。

我似乎找不到与 ui.draggable.position 一起使用的最终选项列表。这是我目前用来放置drop的代码：

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

但正如我上面所说，它们只是放置在先前下降的顶部。

下面是由 2 个拖动项目生成到 1 个可拖动区域的样式。它为第二个元素添加了 -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>

第二个可拖动的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.

在 drop 函数中检查是否有其他元素已经在同一部分中删除；当你放下一个项目时，你会添加一个类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 回答