beatiful-sortablejs v1.0.1

��# Beautiful-sortable-js. beautiful-sortable-js is a JavaScript library for reorderable drag-and-drop lists.

Demo : https://github.com/tahir150/beautiful-sortable-js/edit/master/README.md

Getting Started

Install with NPM:

$ npm install beautiful-sortable-js --save

Import into your project:

import Sortable from 'beautiful-sortable-js';

Or connect a CDN link

<script src="https://github.com/tahir150/beautiful-sortable-js/edit/master/README.md"></script>

Usage

 <div class="sortable-container">
     <div class="sort">
       <span>Hello I am a Element 1</span>
     </div>
     <div class="sort">
       <span>Hello I am a Element 2</span>
     </div>
     <div class="sort">
       <span>Hello I am a Element 3</span>
     </div>
     <div class="sort">
       <span>Hello I am a Element 4</span>
     </div>
  </div>

 const elements = document.querySelectorAll(".sort");
 divsToSort.forEach((item) => {
   const sortable = new Sortable(item)
 });

Options

Options object can be assign by giving second argument.

 const sortable = new Sortable(item, {
    itemClass: "item-class", // class applies to every sortable element
    draggingClass: "dargging", // class will apply when dragging start
    disabledClass: "disabled", // class will apply if sorting is disable
    zoom: 1, // it is viewport zoom value (if have css zoom property)
    containers: "sort-container", // comma seperated appendable boxes classes
    fallBackElement: item.classList.contains("fallback") // it is not sortable, it just append this fallback html
      ? `<div class="fallback-element">
         <span>I am fallback</span>
         </div>`
      : null,
    fallBackClone: false, // if will drop a clone of fallback element
    onStart: (startDetail) => {
      // it will trigger when you start sorting
      console.log(startDetail);
    },
    onDrop: (details) => {
      // it will trigger after dropped even it is sorted or not
      console.log(details);
    },
    onSort: (details) => {
      // if element has change or sorted it takes gurantee to trigger after sorting
      console.log(details);
    },
  });

itemClass option

It will add a class to every sortable Item

draggingClass option

When Sortable Item starts dragging for sorting, the class will applied and when sorted or cancel sorted, the class will be removed.

disabledClass option

When you disable any element, the class will be applied until you re-enable it.

zoom option

If your body or main container has CSS zoom property or transform scale, you will need to give zoom value which help to drag perfectly.

containers option

It takes css comma seperated classes of div's containers.It will allow the item to drop into zontainer while sorting.

fallBackElement option

It takes HTML DOM object or HTML string, It is fallback Element which will drop into your container.To work with this, container is required. It will not drop the Real sorting Element, It will drop your fallback which you've passed to it.

fallBackClone option

It takes Boolean value (defaults to true). It will drop a clone of your fallback Element.

Note : In this version, mobile or Touch devices are not supported !