jQuery可拖动嵌套div并再次拖动

Posted 2023-05-08

【中文标题】jQuery可拖动嵌套div并再次拖动

【英文标题】：jQuery draggable nested divs and dragging again

【发布时间】：2017-05-22 05:10:21

【问题描述】：

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

我之前试过问，但我想我太模糊了。

我有一个项目，当被拖动时，它会变成一个有两列的 div。

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

这部分有效，但一旦它被放下，我就不能再拖放它了。放置后不会掉落任何地方。

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

我有以下 html：（其中包含可拖动文本的项目和“sp-menu-draggable”类是拖动时临时字符串中的 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/

【参考方案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();



);