jQuery 드래그 가능한 중첩 div를 다시 드래그

Question

편집 : 문제 중 하나를 해결했습니다. 드래그 한 후 요소를 드래그 할 수있게되었습니다. 드랍 할 수있는 요소 (sp-dropabble)를 드래그하면 놓을 수있게해야합니다. Ifr 나는 누구든지 의견을 게시하기 전에이 문제를 해결합니다.

전에 물어 보았지만 너무 막연했습니다.

드래그 할 때 두 개의 열이있는 div가되는 항목이 있습니다.

아이디어는 당신이 페이지에서 그런 div를 드래그 할 수 있고 첫 번째 안에 새로운 div를 드래그 할 수 있다는 것입니다.

부분적으로 작동하지만 떨어 뜨린 후에는 더 이상 드래그 앤 드롭을 다시 할 수 없습니다. 그것이 놓여지면 아무 데나 떨어 뜨리지 않을 것입니다.

또한 중첩 된 div로 드래그하는 데 문제가 있습니다. 페이지에있는 기존 예제로 드래그하고 새로운 div 또는 중첩 div에는 드래그하지 않습니다.

나는 다음과 같은 HTML이 :

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

자바 스크립트 (그 안에 드래그 텍스트와 'SP-메뉴 드래그 "클래스는 드래그 할 때 tempstring의 사업부가된다 무엇인가가있는 항목) :

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


});