Front-End Drag and Drop Sorting Implementation Methods

To implement drag-and-drop sorting in the frontend, you can use HTML5’s drag-and-drop API along with JavaScript. Here’s a step-by-step guide to achieve this:

1. Set Up HTML Structure

Create a container for your sortable items. For example:

<div class=”sortable-container”>
  <div class=”item” draggable=”true”>Item 1</div>
  <div class=”item” draggable=”true”>Item 2</div>
  <div class=”item” draggable=”true”>Item 3</div>
</div>

</div>

2. Add CSS Styling

Style your items and add visual feedback for drag-and-drop actions.

.item {
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: move;
}

.item:hover {
  background-color: #e0e0e0;
}

.sortable-container {
  min-height: 400px;
  border: 2px dashed #999;
  padding: 10px;
}

.placeholder {
  height: 30px;
  background-color: #eee;
  border: 1px dotted #ccc;
}

.item {

padding: 10px;

margin: 5px 0;

border: 1px solid #ccc;

background–color: #f0f0f0;

cursor: move;

}

.item:hover {

background–color: #e0e0e0;

}

.sortable–container {

min–height: 400px;

border: 2px dashed #999;

padding: 10px;

}

.placeholder {

height: 30px;

background–color: #eee;

border: 1px dotted #ccc;

}

3. Implement JavaScript Logic

Add event listeners for drag-and-drop events.

document.addEventListener(‘DOMContentLoaded’, function() {
  const container = document.querySelector(‘.sortable-container’);
  const items = document.querySelectorAll(‘.item’);

  items.forEach(item => {
    item.addEventListener(‘dragstart’, handleDragStart);
    item.addEventListener(‘dragend’, handleDragEnd);
  });

  container.addEventListener(‘dragover’, handleDragOver);
  container.addEventListener(‘drop’, handleDrop);
});

function handleDragStart(e) {
  e.dataTransfer.setData(‘text/plain’, this.id);
}

function handleDragEnd(e) {
  // Clean up the placeholder
  const container = document.querySelector(‘.sortable-container’);
  const placeholders = container.querySelectorAll(‘.placeholder’);
  placeholders.forEach(placeholder => placeholder.remove());
}

function handleDragOver(e) {
  e.preventDefault();
  const container = document.querySelector(‘.sortable-container’);

  // Create a temporary div to serve as a placeholder
  const tempDiv = document.createElement(‘div’);
  tempDiv.className = ‘placeholder’;
  tempDiv.style.width = `${e.target.offsetWidth}px`;

  // Find the correct position to insert the dragged item
  const items = container.querySelectorAll(‘.item:not(.placeholder)’);
  let insertPosition;

  if (e.clientY > container.offsetTop + container.offsetHeight / 2) {
    insertPosition = ‘bottom’;
  } else {
    insertPosition = ‘top’;
  }

  // Insert the placeholder before or after the target
  const target = document.querySelector(`#${e.dataTransfer.getData(‘text/plain’)}`);
  if (insertPosition === ‘bottom’ && target) {
    container.insertBefore(tempDiv, target);
  } else if (insertPosition === ‘top’ && target) {
    container.insertBefore(tempDiv, target.nextSibling);
  }
}

function handleDrop(e) {
  e.preventDefault();
  const draggedId = e.dataTransfer.getData(‘text/plain’);
  const draggedItem = document.getElementById(draggedId);

  // Remove the placeholder
  const placeholders = document.querySelectorAll(‘.placeholder’);
  placeholders.forEach(placeholder => placeholder.remove());

  // Insert the dragged item into the correct position
  if (e.clientY > container.offsetTop + container.offsetHeight / 2) {
    container.appendChild(draggedItem);
  } else {
    const firstHalfItems = Array.from(items).slice(0, items.length / 2);
    const foundIndex = firstHalfItems.findIndex(item => item.id === draggedId);
    if (foundIndex !== -1) {
      container.insertBefore(draggedItem, firstHalfItems[foundIndex].nextSibling);
    }
  }

  // Update the order in your data structure
  const newOrder = Array.from(container.querySelectorAll(‘.item’)).map(item => item.id);
  updateSortState(newOrder);
}

function updateSortState(order) {
  console.log(‘New order:’, order);
  // Here you can save the order to localStorage or send it to your backend
}

document.addEventListener(‘DOMContentLoaded’, function() {

const container = document.querySelector(‘.sortable-container’);

const items = document.querySelectorAll(‘.item’);

items.forEach(item => {

item.addEventListener(‘dragstart’, handleDragStart);

item.addEventListener(‘dragend’, handleDragEnd);

});

container.addEventListener(‘dragover’, handleDragOver);

container.addEventListener(‘drop’, handleDrop);

});

function handleDragStart(e) {

e.dataTransfer.setData(‘text/plain’, this.id);

}

function handleDragEnd(e) {

// Clean up the placeholder

const container = document.querySelector(‘.sortable-container’);

const placeholders = container.querySelectorAll(‘.placeholder’);

placeholders.forEach(placeholder => placeholder.remove());

}

function handleDragOver(e) {

e.preventDefault();

const container = document.querySelector(‘.sortable-container’);

// Create a temporary div to serve as a placeholder

const tempDiv = document.createElement(‘div’);

tempDiv.className = ‘placeholder’;

tempDiv.style.width = `${e.target.offsetWidth}px`;

// Find the correct position to insert the dragged item

const items = container.querySelectorAll(‘.item:not(.placeholder)’);

let insertPosition;

if (e.clientY > container.offsetTop + container.offsetHeight / 2) {

insertPosition = ‘bottom’;

} else {

insertPosition = ‘top’;

}

// Insert the placeholder before or after the target

const target = document.querySelector(`#${e.dataTransfer.getData(‘text/plain’)}`);

if (insertPosition === ‘bottom’ && target) {

container.insertBefore(tempDiv, target);

} else if (insertPosition === ‘top’ && target) {

container.insertBefore(tempDiv, target.nextSibling);

}

function handleDrop(e) {

e.preventDefault();

const draggedId = e.dataTransfer.getData(‘text/plain’);

const draggedItem = document.getElementById(draggedId);

// Remove the placeholder

const placeholders = document.querySelectorAll(‘.placeholder’);

placeholders.forEach(placeholder => placeholder.remove());

// Insert the dragged item into the correct position

if (e.clientY > container.offsetTop + container.offsetHeight / 2) {

container.appendChild(draggedItem);

} else {

const firstHalfItems = Array.from(items).slice(0, items.length / 2);

const foundIndex = firstHalfItems.findIndex(item => item.id === draggedId);

if (foundIndex !== –1) {

container.insertBefore(draggedItem, firstHalfItems[foundIndex].nextSibling);

}

// Update the order in your data structure

const newOrder = Array.from(container.querySelectorAll(‘.item’)).map(item => item.id);

updateSortState(newOrder);

}

function updateSortState(order) {

console.log(‘New order:’, order);

// Here you can save the order to localStorage or send it to your backend

}

4. Handle Sorting State

Implement a function to handle the new sorting state, such as saving to localStorage.

function updateSortState(order) {
  localStorage.setItem(‘sortOrder’, JSON.stringify(order));
}

// On page load, restore the order if saved
document.addEventListener(‘DOMContentLoaded’, function() {
  const sortOrder = localStorage.getItem(‘sortOrder’);
  if (sortOrder) {
    const container = document.querySelector(‘.sortable-container’);
    const items = document.querySelectorAll(‘.item’);

    // Reorder items based on saved sort order
    const sortedItems = JSON.parse(sortOrder).map(id => 
      Array.from(items).find(item => item.id === id)
    );

    sortedItems.forEach(item => container.appendChild(item));
  }
});

function updateSortState(order) {

localStorage.setItem(‘sortOrder’, JSON.stringify(order));

}

// On page load, restore the order if saved

document.addEventListener(‘DOMContentLoaded’, function() {

const sortOrder = localStorage.getItem(‘sortOrder’);

if (sortOrder) {

const container = document.querySelector(‘.sortable-container’);

const items = document.querySelectorAll(‘.item’);

// Reorder items based on saved sort order

const sortedItems = JSON.parse(sortOrder).map(id =>

Array.from(items).find(item => item.id === id)

);

sortedItems.forEach(item => container.appendChild(item));

}

});

Conclusion

This implementation provides a basic drag-and-drop sorting functionality with visual feedback. You can enhance it further by adding animations, improving the placeholder logic, or supporting touch events for mobile devices. Remember to test across different browsers and adjust for any compatibility issues.

5 responses to “Front-End Drag and Drop Sorting Implementation Methods”

This is a fantastic guide. I particularly liked the part about handling the sorting state with localStorage. Keep up the great work!

Log in to Reply
Thanks for sharing this! The code examples are very informative. I’ll definitely use this in my next project.

Log in to Reply
The visual feedback during dragging makes it more user-friendly. Love how it’s implemented with CSS!

Log in to Reply
I found this really helpful, especially the JavaScript event listeners and placeholder logic. Perfect for a newbie like me.

Log in to Reply
This article is exactly what I needed! The step-by-step guide using HTML5 drag-and-drop API is clear and easy to follow. Great work!

Log in to Reply

IT Log