Hello,
As Draggable's script bundles are separated from Metronic 8 global bundle I decided including draggable from this link:


The reason for this I wanto to create widgets in the sidebar that gonna be dragged and dropped into the container in the main page while leaving copy of the dragged widget in sidebars widget list and also I wanted to restrict draggability inside the widget list inside sidebar.

I called dragging functionality with this:

document.addEventListener('DOMContentLoaded', function () {
// Initialize Sortable for the sidebar (elements-list-wrap)
var sidebarSortable = new Sortable(document.getElementById('sidebar-container'), {
group: {
name: 'draggable-zone',
pull: 'clone', // Enable cloning when dragging from the sidebar
},
draggable: '.draggable',
handle: '.draggable-handle',
sort: false, // Disable sorting in the sidebar
onStart: function (evt) {
// Disable the drag handle in the cloned item
var clone = evt.from.lastChild.cloneNode(true);
clone.style.pointerEvents = 'none';
evt.clone = clone;
},
});

// Initialize Sortable for the main page container (item-list-wrapper)
var pageContainerSortable = new Sortable(document.getElementById('droppable-container'), {
group: 'draggable-zone',
draggable: '.draggable',
handle: '.draggable-handle',
mirror: {
appendTo: 'body',
constrainDimensions: true,
},
});
});


But it did not work and I have no console errors Dragging acts like text selection.
Need you little help here. Please!