정렬 할 수있는 정렬 가능 (중첩 div)

Question

div를 열 1에서 열 2로 끌어서 복제 할 수있는 코드를 만들었습니다. 열 2는 정렬 가능합니다. 2.

이 잘 작동하지만, 지금은 이미 열 삭제 된 DIV에 1 열에서 사업부를 드래그 할 여기 내 코드는 지금까지의 :

HTML

<div id="column1"> 
    <p>Items</p> 
    <div class="dragItem">Drag me ONE</div> 
    <div class="dragItem">Drag me TWO</div> 
    <div class="dragItem">Drag me THREE</div> 
</div> 
<div id="column2" class="droppable"> 
    <p>Drop here</p> 
</div> 

jQuery를 :

$('.dragItem').draggable({ 
    helper: 'clone', 
    connectToSortable: "#column2" 
}); 

$('.dragItem').sortable({ 
    containment: "parent" 
}); 

$('#column2').sortable({ 
    cancel: '#cont>div', 
    placeholder: "highlight" 
}); 

$('#column2').droppable({ 
    accept: '.dragItem', 
    drop: function(event, ui) { 
     var draggable = ui.draggable; 
     var droppable = $(this); 
     var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); 
     drag.appendTo(column2); 
    } 
}); 

감사

Answer 1

항목이 삭제되면 해당 div에 sortable 및 droppable을 적용해야합니다.

$('.dragItem').draggable({ 
 
    helper: 'clone', 
 
    connectToSortable: "#column2,#column2 div" 
 
}); 
 

 
$('.dragItem').sortable({ 
 
    containment: "parent" 
 
}); 
 

 
$('#column2').sortable({ 
 
    placeholder: "highlight" 
 
}); 
 

 
$('#column2').droppable({ 
 
    accept: '.dragItem', 
 
    drop: function(event, ui) { 
 
    var draggable = ui.draggable; 
 
    var droppable = $(this); 
 
    var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); 
 
    drag.appendTo(column2); 
 
    drag.sortable({ 
 
     placeholder: "highlight" 
 
    }); 
 
    drag.droppable({ 
 
     accept: ".dragItem", 
 
     drop: function (event, ui) { 
 
     var draggable = ui.draggable; 
 
     var droppable = $(this); 
 
     var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); 
 
     } 
 
    }) 
 
    drag.css({width:'', height: ''}) 
 
    } 
 
});

#column1, #column2 { 
 
    width: 250px; 
 
    margin-right: 10px; 
 
    border: 1px solid red; 
 
    float: left 
 
} 
 
.droppable div { 
 
    border: 1px solid blue; 
 
    margin: 5px; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" /> 
 
<div id="column1"> 
 
    <p>Items</p> 
 
    <div class="dragItem">Drag me ONE</div> 
 
    <div class="dragItem">Drag me TWO</div> 
 
    <div class="dragItem">Drag me THREE</div> 
 
</div> 
 
<div id="column2" class="droppable"> 
 
    <p>Drop here</p> 
 
</div>

: 여기

은 일례이며