Tiny Drag To Sort JavaScript Library – sbDraggable

Preview:

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