Vue.Draggable vs React-sortable-hoc

Pros

• Easy integration with Vue.js applications
• Supports both Vue 2 and Vue 3
• Highly customizable with numerous configuration options
• Excellent performance for smooth drag-and-drop interactions

Cons

• Learning curve for advanced features and customizations
• Limited built-in styling options, requiring additional CSS work
• Potential conflicts with other Vue libraries or components
• Documentation could be more comprehensive for complex use cases

Pros

• Easy to implement: The library provides a simple API and higher-order components that make it easy to add drag-and-drop functionality to existing React components.

• Performance optimized: Built with performance in mind, it uses virtualization techniques to handle large lists efficiently.

• Customizable: Offers a wide range of customization options, including custom drag handles, auto-scrolling, and animation settings.

• Cross-platform support: Works well across different devices and platforms, including touch devices.

Cons

• Learning curve: While easy to implement basic functionality, mastering advanced features and optimizations may require some time and effort.

• Dependency on React: As a React-specific library, it's not suitable for projects using other frameworks or vanilla JavaScript.

• Limited built-in styling: The library focuses on functionality rather than appearance, so developers may need to invest additional time in styling and theming.

• Potential performance issues: In some cases, particularly with very large lists or complex layouts, performance can degrade if not properly optimized.

Basic Usage

This snippet demonstrates how to create a simple draggable list using Vue.Draggable:

<template>
  <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
    <div v-for="element in myArray" :key="element.id">
      {{ element.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
</script>

Two-Lists Example

Here's an example of how to create two interconnected draggable lists:

<template>
  <div class="row">
    <draggable class="list-group" :list="list1" group="people">
      <div class="list-group-item" v-for="element in list1" :key="element.name">
        {{ element.name }}
      </div>
    </draggable>
    <draggable class="list-group" :list="list2" group="people">
      <div class="list-group-item" v-for="element in list2" :key="element.name">
        {{ element.name }}
      </div>
    </draggable>
  </div>
</template>

Basic Usage

This snippet demonstrates how to create a basic sortable list using react-sortable-hoc:

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

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

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

Handling Sort End

This snippet shows how to handle the onSortEnd event to update the state:

const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

const onSortEnd = ({oldIndex, newIndex}) => {
  setItems(arrayMoveImmutable(items, oldIndex, newIndex));
};

return (
  <SortableList items={items} onSortEnd={onSortEnd} />
);

Custom Drag Handle

This example demonstrates how to use a custom drag handle:

const DragHandle = SortableHandle(() => <span>::</span>);

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

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

Installation

1. Install the package using npm or yarn:

npm install vuedraggable

yarn add vuedraggable

2. Import the component in your Vue.js project:

import draggable from 'vuedraggable'

Basic Usage

3. Register the component in your Vue instance or component:

export default {
  components: {
    draggable,
  },
  // ...
}

4. Use the component in your template:

<template>
  <div>
    <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
      <div v-for="element in myArray" :key="element.id">
        {{ element.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myArray: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' },
      ],
      drag: false,
    }
  },
}
</script>

5. Customize the draggable component by adding props and event handlers as needed. Refer to the official documentation for more advanced usage and configuration options.

Installation

To get started with react-sortable-hoc, follow these steps:

1. Install the package using npm or yarn:

npm install react-sortable-hoc

yarn add react-sortable-hoc

2. Import the necessary components in your React project:

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

Basic Usage

Here's a simple example to demonstrate how to use react-sortable-hoc:

1. Create a sortable item component:

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

2. Create a sortable container component:

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

3. Use the sortable list in your main component:

import React, { useState } from 'react';
import { arrayMoveImmutable } from 'array-move';

const MyComponent = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(arrayMoveImmutable(items, oldIndex, newIndex));
  };

  return <SortableList items={items} onSortEnd={onSortEnd} />;
};

This example creates a simple sortable list where items can be dragged and reordered. The onSortEnd function updates the state with the new order of items after each drag operation.