Tiny Drag To Sort JavaScript Library – sbDraggable

Category: Drag & Drop , Javascript | February 23, 2023
Author:SuperBotics
Views Total:154 views
Official Page:Go to website
Last Update:February 23, 2023
License:MIT

Preview:

Tiny Drag To Sort JavaScript Library –  sbDraggable

Description:

sbDraggable is a really simple draggable JavaScript library for handling drag and drop on any elements.

How to use it:

1. Load the sbDraggable library in the document.

<script src="sbDraggable.js"></script>

2. The necessary CSS styles.

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
/* custom styles here */
.sb-dragging-start {
  opacity: 0.4;
}
.sb-dragging-over {
  border-top: 2px solid #ea6b3387;
}

3. Enable the drag to sort functionality on your elements.

<ul id="columns">
  <li class="column" draggable="true"><header>A</header></li>
  <li class="column" draggable="true"><header>B</header></li>
  <li class="column" draggable="true"><header>C</header></li>
  <li class="column" draggable="true"><header>D</header></li>
  <li class="column" draggable="true"><header>E</header></li>
</ul>
new sbDraggable("#columns .column");

4. Callback function.

new sbDraggable("#columns .column",{
    afterHandleDragStart: function(element, elementInstance, sbDraggable) { return; },
    afterHandleDragOver: function(element, elementInstance, sbDraggable) { return; },
    afterHandleDragEnter: function(element, elementInstance, sbDraggable) { return; },
    afterHandleDragLeave: function(element, elementInstance, sbDraggable) { return; },
    afterHandleDrop: function(element, elementInstance, sbDraggable) { return; },
    afterHandleDragEnd: function(element, elementInstance, sbDraggable) { return; }
});

Changelog:

02/23/2023

  • Bugfix

You Might Be Interested In:


Leave a Reply