JQuery 将元素拖放到 div 上

Question

我正在使用 JQuery UI，更具体地说是 Draggable 和 Sortable。

目前，我有以下标记

<div class="col-lg-3" id="ddForm">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <span class=""></span>Elements
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <ul class="list-group">
                <li class="list-group-item draggable"><span class="fm-header-icon"></span>Heading</li>

                <li class="list-group-item draggable"><span class="fm-textbox-icon"></span>Text Box</li>

                <li class="list-group-item draggable"><span class="fm-textarea-icon"></span>Text Area</li>

            </ul>
        </div>
    </div>
</div>

<div class="col-lg-9 bgGrey sortable">


</div>

我在这里设置了一个JSFiddle JSFiddle

我想做的是创建一种表单构建器。所以在左侧面板中，我显示了不同的表单元素。然后你可以将它们拖到灰色的 div 中，元素应该占据 div 的宽度。本质上，我正在尝试构建类似于以下Link

我已经设法使表单元素可拖动，但我的第一个问题是能够将它们拖放到我的 div 上。我该怎么做呢？

任何建议表示赞赏。

谢谢

Answer 1

将connectToSortable: "#sortable"改为

connectToSortable: ".sortable"

你的 Jquery 应该是这样的

$(function() {
    $( ".sortable" ).sortable({
        revert: true
    });
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});

JsFiddle