Déposez un sortable dans un triable (divs imbriqués)

Question

J'ai créé un code qui me permet de faire glisser et de cloner les divs de la colonne 1 à la colonne 2. La colonne 2 est triable.

Cela fonctionne bien, mais je veux maintenant faire glisser un div de la colonne 1 dans une div qui a déjà été abandonné dans la colonne 2.

Voici mon code à ce jour:

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

Merci

Answer 1

Une fois l'élément supprimé - vous devez appliquer les codes sortable et droppable à ce div.

Voici un exemple:

$('.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>