swap.js

Lightweight JS library for making dom elements swappable with each other(by drag & drop)

How does it work?

It will run automatically and will observe DOM changes to detect DOM elements that are marked as swappable and you will be able to swap your DOM elements by just drag & drop. No need to run any initialization or refresh code manually, you can simply add or remove elements to the dom or change their classes and swap.js will detect the changes and toggle their swappable functionality in run time. Do you want to remove swap behaviour of an element? Simple, just remove its 'swappable' class and its done.

Why use swap.js?

The goal of this project is to create a very simple tool for swap functionality that needs no coding and extensive configuration. Just plug & play.

Try the demo here

Installation

npm i swap.js

How to use

• React/Next

Just import it globally to your project like

import swapJs from 'swap.js';

• Use without npm

You can download swap.js from here and add it to your web project.

How to mark DOM elements as swappable

<div class="swappable_container">
  <div class="swappable">
    <span class="swap_handle">1</span>
  </div>
  <div class="swappable">
    <span class="swap_handle">2</span>
  </div>
  <div class="swappable"></div>
  <div class="swappable">4</div>
  <div class="swappable">5</div>
</div>

As you can see with the example code above there are three classes for marking.

• swappable_container

  You need to use this class to mark your element as the parent of the elements that you want to be swappable with each other.

• swappable

  You need to use this class to mark your element that you want to be swappable.

• swap_handle

  You need to use this class to mark an element as swap handle. The element that is marked as a swap handle needs to be child of a swappable element and that swappable element can be swapped only with that swap handle.

onswapcomplete callback

You can attach a callback function to swappable_container element to get notified when two elements are swapped with each other.

const container = document.querySelector('.swappable_container');

container.onswapcomplete = function (draggedElement, targetElement) {
  console.log(draggedElement, targetElement);
};

Touch Support

Touch support has been added and successfully tested on android.