Closed shahryarjb closed 1 year ago
This is an example of starting create a simple library instead of SortableJS
// Step 1: Set up the HTML structure <div class="draggable"> <div draggable="true">Item 1</div> <div draggable="true">Item 2</div> <div draggable="true">Item 3</div> </div> <div class="droppable"></div> // Step 2: Define the draggable elements const draggableItems = document.querySelectorAll('.draggable [draggable=true]'); draggableItems.forEach(item => { item.addEventListener('dragstart', event => { event.dataTransfer.setData('text/plain', item.textContent); }); }); // Step 3: Define the droppable elements const droppable = document.querySelector('.droppable'); droppable.addEventListener('dragover', event => { event.preventDefault(); event.dataTransfer.dropEffect = 'move'; }); droppable.addEventListener('drop', event => { event.preventDefault(); const droppedItem = event.dataTransfer.getData('text/plain'); console.log(`Dropped item: ${droppedItem}, from draggable element: ${event.target}`); }); // Step 7: Change order of items in div const item1 = document.querySelector('.draggable div:nth-child(1)'); const item3 = document.querySelector('.draggable div:nth-child(3)'); // Move item3 before item1 item1.parentNode.insertBefore(item3, item1);
temporary fix bug, please if you see another problem open this issue
This is an example of starting create a simple library instead of SortableJS