Question

编辑：我已经解决了其中一个问题。我现在可以在拖动后使元素可拖动。我只需要将可拖放元素（sp-dropabble）拖放后即可放置。如果我在任何评论之前解决这个问题，我会发布我的答案。

我之前尝试过询问，但我觉得我太模糊了。

我有一个项目，当拖动成为一个有两列的div。

这个想法是你可以在页面上拖动这样一个div，然后在第一个内部拖动一个新div，依此类推。

这部分有效，但一旦掉线，我就再也无法拖放了。一旦放置它就不会掉落。

此外，我无法拖入嵌套的div。它将拖动到我在页面上的现有示例，但不会拖到新的div或嵌套的div中。

我有以下HTML :(包含文本可拖动的项目和“sp-menu-draggable”类在拖动时成为tempstring中的div）

    <div class="Outer row">
    <div class="col-lg-2"></div>
    <div class="MainWrapper sp-droppable DocPreview col-md-9 col-lg-6">
        <div>
            <div class='row sp-draggable'>
                <div class='column sp-droppable col-md-6'></div>
                <div class='column sp-droppable col-md-6'></div>

            </div>

        </div>
    </div>
    <div class="NavBar sidebar-nav col-md-3 col-lg-2">
    <nav>
        <ul class="nav" role="menu">
            <li>
                <a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">bob</a>
                <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
                    <li class="sp-menu-draggable">draggable</li>
                    <li>bob blib</li>
                    <li>bob blab</li>
                </ul>
            </li>
            <li>blib</li>
            <li>blob</li>
        </ul>
    </nav>
</div>
    <div class="col-lg-2"></div>
</div>

Javascript：

$(function () {
var tempString = "<div class='sp-draggable'>" +
                "<div class='row'>" +
                    "<div class='column sp-droppable drop-container col-md-6'></div>" +
                    "<div class='column sp-droppable col-md-6'></div>" +
                "</div>" +
            "</div>"

$(".sp-menu-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    helper: function () {
        return tempString
    },
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    containment: "#MainWrapper",

});

$(".sp-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    containment: "#MainWrapper"
});



$(".sp-droppable").droppable({
    accept:".sp-draggable",
    drop: function (event, ui) {
        $(this).append(ui.draggable);
    }
}).sortable();

});

所以我有一个tempString，它被分配给菜单项，是什么拖拉。

我有两种可拖动的方法。一个用于菜单项，它成为div，一个用于现有（或已拖动）div。

CSS：

body {
    background-color:#ededed;
}

.Outer{

    white-space: nowrap;
    overflow: auto;
    display: table;
    width:100%;
}

.MainWrapper {
    background-color:#ffffff;
    width:21cm;
    min-height:29.7cm;
    padding:2cm;
    margin:1cm auto;
    border: 1px #d3d3d3;
    border-radius:5px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.1);
    display: table-cell;
}

.NavBar{

}

.sp-draggable{
    float:left;
    width:100%;
}

*, *::after, *::before {
    box-sizing: border-box;
}

.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {
    clear: both;
}

.DocPreview .row {

    border: 1px solid #ddd;


    box-sizing: border-box;
    margin: 15px 0;
    padding: 25px 14px 0;
    position: relative;
}

.DocPreview .column {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
    padding: 39px 19px 24px;
    position: relative;
}

我有一个代码的提琴手，但我无法让tempString在其中工作，所以我不确定它会有多大的帮助。 https://jsfiddle.net/7ptkqhy1/

Answer 1

好的，我已经开始工作了。以为我会分享我的答案以防其他人有同样的问题。

$(function () {
$(".sp-menu-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    helper: function () {
        return tempString
    },
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    cursor: "move"

});

$(".sp-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    cursor: "move"
});



$(".sp-droppable").droppable({
    greedy: true,
    accept: ".sp-draggable",
    drop: function (event, ui) {

        makeDroppable($(this), event, ui)
    }
}).sortable();

function makeDroppable($elem, event, ui) {
    $elem.append(ui.draggable);
    $(ui.draggable).draggable({
        revert: "invalid",
        connectToSortable: ".sp-droppable",
        start: function (event, ui) {
            $(ui.helper).css("width", "100%").css("height", "auto");
        },
        cursor: "move"
    });

    var target = $(event.target);
    var dropped = $(ui.draggable).appendTo(target);

    dropped.find(".sp-droppable").droppable({
        accept: ".sp-draggable",
        greedy: true,
        drop: function (event, ui) {
            makeDroppable($elem, event, ui);
        }
    }).sortable();
}


});

jQuery draggable嵌套div并再次拖动

1 个答案: