JSFiddle - React, Tailwind, and code Playground
HTML
<script>
/**!
* Sortable
* @author RubaXa <trash@rubaxa.org>
* @license MIT
*/
(function(factory) {
"use strict";
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof module != "undefined" && typeof module.exports != "undefined") {
module.exports = factory();
} else if (typeof Package !== "undefined") {
Sortable = factory(); // export for Meteor.js
} else { /* jshint sub:true */
window["Sortable"] = factory();
}
})(function() {
"use strict";
var dragEl, parentEl, ghostEl, cloneEl, rootEl, nextEl,
scrollEl, scrollParentEl,
lastEl, lastCSS, lastParentCSS,
oldIndex, newIndex,
activeGroup, autoScroll = {},
tapEvt, touchEvt,
moved,
/** @const */
RSPACE = /\s+/g,
expando = 'Sortable' + (new Date).getTime(),
win = window,
document = win.document,
parseInt = win.parseInt,
supportDraggable = !! ('draggable' in document.createElement('div')),
supportCssPointerEvents = (function(el) {
el = document.createElement('x');
el.style.cssText = 'pointer-events:auto';
return el.style.pointerEvents === 'auto';
})(),
_silent = false,
abs = Math.abs,
slice = [].slice,
touchDragOverListeners = [],
_autoScroll = _throttle(function( /**Event*/ evt, /**Object*/ options, /**HTMLElement*/ rootEl) {
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
if (rootEl && options.scroll) {
var el, rect, sens = options.scrollSensitivity,
speed = options.scrollSpeed,
x = evt.clientX,
y = evt.clientY,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
vx, vy;
// Delect scrollEl
...
JavaScript
new Sortable( document.querySelector( '.list' ) )