jQueryドラッグ可能なネストされたdivと再度ドラッグ

Question

編集：私は問題の1つを解決しました。私はドラッグされた後に要素をドラッグ可能にすることができます。私は、ドロップ可能な要素（sp-dropabble）を一度ドラッグすると削除可能にする必要があります。誰かがコメントする前に私はこれを修正します。答えを投稿します。

私は前に尋ねたが、あまりにも曖昧だったと思う。

ドラッグされたときに2列のdivになるアイテムがあります。

このようなdivをページにドラッグし、最初のdivの中に新しいdivをドラッグするなどの方法があります。

それは部分的には機能しますが、一度削除されるともうドラッグアンドドロップできなくなります。それが置かれたら、どこにでも落とされません。

また、ネストされたdivにドラッグするのに問題があります。ページ上にある既存の例にドラッグしますが、新しいdivや入れ子になったdivには挿入されません。

私は、次のようなHTMLがあります（これにはドラッグ可能なテキストと「SP-メニュードラッグ可能な」クラスでアイテムをドラッグするとき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を持っており、ドラッグアンドドロップするものです。

私は2つのドラッグ可能な方法があります。 1つはdivになるメニュー項目用で、もう1つは既存の（または既にドラッグされている）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(); 
} 


});