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/

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

1 个答案: