JQuery拖放位置在多个拖放到一个可拖放区域

Question

我创建了一个非常简单的拖放测验，其中用户有一个包含 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>

希望这是有道理的。

这里是演示应用程序：link to demo app

谁能阐明如何让这些正确堆叠？

非常感谢 艾伦

Answer 1

无需重新考虑拖放处理克隆而不是移动，您可以这样做。

首先不要对多个元素使用多次相同的id，而是使用类或数据属性；以下示例使用名为 section 的 attr。

在 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/