drag-and-drop-javascript-github

A Simple JS Library For Handling Drag and Drop On Elements | sbDraggable

by

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

javascript drag and drop from one list to another, make a sortable list with draggable items using javascript, drag and drop javascript, drag and drop javascript github, javascript drag and drop example

How to make use of it:

1. Load the sbDraggable library into the document.

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

2. 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 function to sort your items.

<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; }
});

Tiny Drag To Sort JavaScript Library, sbDraggable Plugin/Github, drag and drop javascript library, sortable js, drag and drop chart javascript

See Demo And Download

Demo
Download

Official Website(SuperBotics): Click Here

This superior jQuery/javascript plugin is developed by SuperBotics. For extra Advanced Usages, please go to the official website.

Leave a Comment