JSFiddle - React, Tailwind, and code Playground

by kplcode

HTML

<div class="demo">
  <ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List Item</li>
    <li...

CSS

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
  cursor: move;
}

#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

#sortable li.fixed {
  cursor: default;
  color: #959595;
  opacity: 0.5;
}

#sortable {
  margin-top: 20px;
  overflow-y: scroll
}

JavaScript

$('#sortable').css({height: ($(window).height()-50) + 'px'});
var scroll = '';
var $scrollable = $("#sortable");

function scrolling() {
  if (scroll == 'up') {
    $scrollable.scrollTop($scrollable.scrollTop() - 20);
    setTimeout(scrolling, 50);
  } else if (scroll == 'down') {
    $scrollable.scrollTop($scrollable.scrollTop() + 20);
    setTimeout(scrolling, 50);
  }
}

$("#sortable").sortable({
  scroll: false,
  out: function(event, ui) {
    if (!ui.helper) return;
    if (ui.offset.top > 0) {
      scroll = 'down';
    } else {
      scroll = 'up';
    }
    scrolling();
  },
  over: function(event, ui) {
    scroll = '';
  },
  deactivate: function(event, ui) {
    scroll = '';
  }
});
$("#sortable").disableSelection();