javascript - 如何递归创建 jQuery UI droppables？

Question

我使用 jQuery UI 进行拖放操作。

当可拖动项目被放置时，我使用 drop 函数附加一个新的 HTML 元素并使其可拖动和可放置。它在第一个实例中有效(请参阅 http://jsfiddle.net/ze5zgfsq/1/ )，但可拖动 + droppale 功能(包括放置功能)不会延伸得更深。

不过，我希望它能够递归地工作，这样，如果另一个可拖动元素被放置在创建的元素(放置的元素)内，那么就会在其中创建一个新的可拖动、可放置元素，依此类推。

这是示例代码:

$("#draggableObject").disableSelection();

$("#draggableObject").draggable({
    revert: "invalid",
    helper: "clone",
    opacity: 0.7
});


$(".container").droppable({
    accept: "#draggableObject, .droppedObject",
    activeClass: "stateHighlight",
    hoverClass: "stateHover",
    greedy: true,
    drop: function (event, ui) {
        $(this).append('<li class="droppedObject" style="color:black;text-align:center;">Dropped Object</li>');
        $(".droppedObject").draggable({
            revert: "invalid",
            helper: "clone",
            opacity: 0.7
        }).droppable({
            accept: "#draggableObject, .droppedObject",
            activeClass: "stateHighlight",
            hoverClass: "stateHover",
            greedy: true,
            drop: function (event, ui) {
                $(this).append('<li class="droppedObject" style="color:black;text-align:center;">Dropped Object</li>');
                $(".droppedObject").draggable({
                    revert: "invalid",
                    helper: "clone",
                    opacity: 0.7
                });

            }
        });

    }
});

这是 HTML/CSS:

<ul>
    <li id="draggableObject">Draggable Object</li>
</ul>
<ul class="container">
    <li>Drop Items Here</li>
</ul>


ul {
    height: 300pt;
    width: 200pt;
    border: 1pt solid blue;
    border-radius: 2pt;
}
li {
    display: block;
    min-height: 100pt;
    min-width: 100pt;
    border: 1pt solid black;
    border-radius: 2pt;
    margin: 2pt;
    cursor: move;
    text-align: center;
}

Answer 1

我在尝试实现类似的东西时遇到了你的问题。看看这是否有帮助:

http://jsfiddle.net/sdqfotqe/1/

我使用的技巧是单独创建选项对象，然后在其内部使用它，即 $d.droppable(droppableOptions);

它并不完全符合您想要做的事情，但应该有助于解决问题的递归方面。

HTML:

<div id="divItems">
    <div data-fhirq-type="group" class="editor-choice">Group</div>
    &nbsp;&nbsp;
    <div data-fhirq-type="question" class="editor-choice">Question</div>
</div>

<br/><br />

<div id="divQuestionnaire">
    <div id="divRootGroup" class="editor-group"></div>
</div>

CSS:

.editor-group {
    border: 1px solid #000;
    min-height: 50px;
    width:100%;
    padding:20px;
    background: #efefef;
}

.editor-question {
    border: 1px solid #000;
    min-height: 50px;
    width:100%;
    padding:20px;
    background: #677b92;
}

.editor-choice {
    cursor:move;
    width: 100px;
    height: 75px;
    background: #ccc;
    display:inline-block;
}

.droppable-hover {
    background: #fffa00;
}

.remove-choice {
    width:25px;
    height:25px;
    border: 1px solid #ddd;
}

JavaScript:

$(document).ready(function () {

    $('#divGroupOptions').hide();
    $('#divQuestionOptions').hide();

    var droppableOptions = {
        accept: '.editor-choice',
        greedy: true, /* only drop the element in one place */
        hoverClass: "droppable-hover", /* highlight the current drop zone */
        drop: function (event, ui) {

            /* clone, because many elements can be added - it's a copy, not a move */
            $d = $(ui.draggable).clone();

            $d.removeClass('editor-choice');
            $d.addClass(($d.attr('data-fhirq-type') == 'group') ? 'editor-group' : 'editor-question');

            /* add a button so the element can be removed if no longer necessary */
            var $removeBtn = $('<button class="remove-choice">x</button>').click(function () { $(this).parent().remove(); });
            $d.append($removeBtn);

            /* make the new element droppable i.e. to support groups within groups etc... */
            $d.droppable(droppableOptions).sortable();

            $(this).append($d);
        }
    };

    $("#divRootGroup").droppable(droppableOptions).sortable();
    $(".editor-choice").draggable({
        helper: 'clone'
    });
});