Author: | SuperBotics |
---|---|
Views Total: | 154 views |
Official Page: | Go to website |
Last Update: | February 23, 2023 |
License: | MIT |
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