jQuery перетаскиваемые вложенные divs и перетаскивание снова

Question

EDIT: Я решил одну из проблем. Теперь я могу получить элементы, которые можно перетащить после того, как их перетащили. Мне просто нужно сделать droppable элементы (sp-dropabble) недоступными после их перетаскивания. Если я исправлю это, прежде чем комментировать, я отправлю свой ответ.

Я пробовал спрашивать, но я был слишком расплывчатым, я думаю.

У меня есть элемент, который при перетаскивании становится div с двумя столбцами.

Идея состоит в том, что вы можете перетащить такой div на страницу, а затем перетащить новый div внутри первого и так далее.

Это частично работает, но после его падения я больше не могу перетаскивать его снова. Он не будет падать нигде после его размещения.

Также у меня возникают проблемы с перетаскиванием в гнездовые div. Он переместится к существующему примеру, который у меня есть на странице, но не к новым div или к вложенным div.

У меня есть следующий HTML: (элемент с текстом перетаскиваемом в нем и "SP-меню-перетаскиваемым" класс, что становится DIV в tempstring при перетаскивании)

<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> 

The 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(); 
} 


});