selecto

Pros of Sortable

• More mature and widely adopted project with a larger community
• Supports nested sortable lists and multi-list sorting
• Offers additional features like auto-scrolling and touch device support

Cons of Sortable

• Limited to drag-and-drop sorting functionality
• May have a steeper learning curve for complex implementations
• Larger file size compared to Selecto

Code Comparison

Selecto:

const selecto = new Selecto({
  container: document.body,
  selectableTargets: [".target"],
  selectByClick: true,
});

selecto.on("select", (e) => {
  e.added.forEach((el) => el.classList.add("selected"));
  e.removed.forEach((el) => el.classList.remove("selected"));
});

Sortable:

const sortable = new Sortable(document.getElementById('list'), {
  animation: 150,
  ghostClass: 'blue-background-class'
});

sortable.on('sort', (evt) => {
  console.log(evt.oldIndex, evt.newIndex);
});

Selecto focuses on element selection, while Sortable specializes in drag-and-drop sorting. Selecto's API is centered around selecting elements, whereas Sortable's API revolves around managing sortable lists. The code examples demonstrate their primary use cases: Selecto for selecting elements and Sortable for reordering list items.

Pros of Dragula

• Lightweight and simple to use, with minimal setup required
• Supports touch events for mobile devices out of the box
• Provides a flexible API for customizing drag and drop behavior

Cons of Dragula

• Limited to drag and drop functionality, lacking advanced selection features
• May require additional plugins or custom code for more complex use cases
• Less actively maintained, with fewer recent updates compared to Selecto

Code Comparison

Selecto:

const selecto = new Selecto({
  container: document.body,
  selectableTargets: [".target"],
  selectByClick: true,
  selectFromInside: false,
});

Dragula:

const drake = dragula([
  document.getElementById('left-container'),
  document.getElementById('right-container')
]);

Key Differences

• Selecto focuses on element selection, while Dragula specializes in drag and drop
• Selecto offers more advanced selection features, such as lasso selection and keyboard shortcuts
• Dragula provides a simpler API for basic drag and drop functionality
• Selecto has more frequent updates and active development
• Dragula has been around longer and has a larger user base

Both libraries serve different purposes and can be used together in projects requiring both selection and drag-and-drop capabilities.

Pros of react-beautiful-dnd

• Specifically designed for React applications, offering seamless integration
• Provides a smooth, natural dragging experience with animations
• Extensive documentation and examples for various use cases

Cons of react-beautiful-dnd

• Limited to list and grid layouts, less flexible for complex selections
• Focused solely on drag-and-drop functionality, not multi-select

Code Comparison

react-beautiful-dnd:

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

<DragDropContext onDragEnd={onDragEnd}>
  <Droppable droppableId="list">
    {(provided) => (
      <ul {...provided.droppableProps} ref={provided.innerRef}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id} index={index}>
            {(provided) => (
              <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                {item.content}
              </li>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </ul>
    )}
  </Droppable>
</DragDropContext>

Selecto:

import Selecto from "react-selecto";

<Selecto
  container={".container"}
  selectableTargets={[".selecto-area .cube"]}
  selectByClick={true}
  selectFromInside={false}
  toggleContinueSelect={["shift"]}
  hitRate={100}
  onSelect={e => {
    e.added.forEach(el => {
      el.classList.add("selected");
    });
    e.removed.forEach(el => {
      el.classList.remove("selected");
    });
  }}
/>

Pros of react-sortable-hoc

• Specifically designed for React applications, providing seamless integration
• Offers a higher-level abstraction for sorting and reordering elements
• Supports both vertical and horizontal sorting out of the box

Cons of react-sortable-hoc

• Limited to sorting and reordering functionality, less versatile for other selection tasks
• May have a steeper learning curve for developers new to higher-order components

Code Comparison

react-sortable-hoc:

import { SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) => <li>{value}</li>);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

Selecto:

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  selectableTargets: [".selecto-area .cube"],
  selectByClick: true,
  selectFromInside: false,
  continueSelect: false,
});

Summary

• react-sortable-hoc is more specialized for React-based sorting tasks
• Selecto offers broader selection capabilities beyond just sorting
• react-sortable-hoc has a more React-centric API
• Selecto provides a more flexible, vanilla JavaScript approach

Pros of Muuri

• More comprehensive grid layout and sorting functionality
• Better support for responsive layouts and grid item resizing
• Extensive animation options for item transitions

Cons of Muuri

• Steeper learning curve due to more complex API
• Larger file size and potentially higher performance overhead
• Less focus on selection functionality compared to Selecto

Code Comparison

Selecto (basic selection):

const selecto = new Selecto({
  container: document.body,
  selectableTargets: [".target"],
});
selecto.on("select", e => {
  e.selected.forEach(el => el.classList.add("selected"));
});

Muuri (basic grid setup):

const grid = new Muuri('.grid', {
  items: '.item',
  dragEnabled: true,
  layout: {
    fillGaps: true
  }
});

While both libraries offer drag-and-drop functionality, Selecto focuses more on element selection, whereas Muuri provides comprehensive grid management features. Selecto's API is simpler and more straightforward for basic selection tasks, while Muuri offers more advanced grid layout and sorting capabilities at the cost of increased complexity.