Third-party plugins

Drag & Drop

Implement drag-and-drop, reorderable lists with ease using Sortable.js, fully compatible with modern browsers and touch devices.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://sortablejs.github.io/Sortable/" target="_blank" class="link link-primary font-semibold">SortableJs</a> with Semji.

<body>
  <script src="../path/to/vendor/sortablejs/Sortable.min.js"></script>
</body>
JavaScript
const example1 = document.querySelector('#example')
  Sortable.create(example1, {
    animation: 150,
});

Basic example

Simple list example

Here’s how a basic drag-and-drop list appears with the simplest markup.

  • Weekly Insights
  • Resource Center
  • Team Collaboration
  • Product Updates
  • Community Forum

Illustrations

Stats

These stats represent a real-time overview of key business metrics, including orders, revenue, invoices, and shipments

Order
7,500 of 10,000 orders
Revenue
$45,000 of $100,000
Invoice
$18,200 of $25,000
Shipments
10,450 of 12,000 shipments

Images

This showcases a list of avatars with a drag-and-drop interaction, perfect for user selection or grouping.

avatar
avatar
avatar
avatar
avatar
avatar
avatar
avatar

Shared

Example of a shared task list with 'Pending' and 'Completed' tasks, each assigned to a user with an avatar.

Pending Tasks

  • Design new company logo.
    avatar
  • Prepare quarterly report.
    avatar
  • Schedule team meeting.
    avatar
  • Update client database.
    avatar
  • Plan marketing campaign.
    avatar

Completed Tasks

  • Launch new website.
    avatar
  • Finalize budget proposal.
    avatar
  • Conduct employee training.
    avatar
  • Organize office relocation.
    avatar
  • Attend industry conference.
    avatar

Cloning

Example of a cloned task list with 'Pending Tasks' and 'Completed Tasks', each task assigned to a user with an avatar."

Pending Tasks

  • Develop mobile app prototype.
    avatar
  • Research market trends.
    avatar
  • Organize product launch event.
    avatar
  • Update company policy documents.
    avatar
  • Design promotional materials.
    avatar
  • Prepare investor pitch deck.
    avatar

Completed Tasks

  • Complete quarterly audit.
    avatar
  • Launch social media campaign.
    avatar
  • Train new staff members.
    avatar
  • Upgrade office equipment.
    avatar
  • Submit project deliverables.
    avatar
  • Host client appreciation dinner.
    avatar

Disabled Sorting

Try sorting the pending tasks. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the pending tast to the list on the completed task.

Pending Tasks

  • Compile Q4 financial statements.
  • Review vendor contracts.
  • Test new software deployment.
  • Create new onboarding materials.
  • Analyze customer satisfaction survey.

Completed Tasks

  • Launch internal newsletter.
  • Finalize project timeline for new product.
  • Conduct annual security audit.
  • Hold Q3 review meeting with stakeholders.
  • Complete brand style guide.
  • Update remote work policy.

Handle

Example of a list where items can be rearranged using a draggable handle, allowing only the handle to be used for drag-and-drop functionality.

  • Weekly Insights
  • Resource Center
  • Team Collaboration
  • Product Updates
  • Community Forum

Nested

Example of a nested list where you can drag and drop items to reorder them, even within different levels. Each item has a handle for easy dragging and rearranging.

Item 1.1
Item 2.1
Item 2.2
Item 3.1
Item 3.2
Item 3.3
Item 3.4
Item 2.3
Item 2.4
Item 1.2
Item 1.3
Item 1.4
Item 2.1
Item 2.2
Item 2.3
Item 2.4
Item 1.5

Swap

The <a href="https://github.com/SortableJS/Sortable/tree/master/plugins/Swap" target="_blank" class="link link-primary">Swap</a> plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.

  • Weekly Insights
  • Resource Center
  • Team Collaboration
  • Product Updates
  • Community Forum