After looking at the JQueryUI demos, specifically this example, I am attempting to implement a feature where the sort functionality is disabled on the left list, and items from the left list are copied instead of moved. Is there a way to achieve this?
If you want to see my attempt, check out the jsfiddle here
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
I have tried using the draggable and droppable interaction as an alternative approach, but I am struggling to drop elements into a specific position like I can with sortable. You can view my attempt in this jsfiddle:
$(function() {
$( "#sortable1 li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#sortable2" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});