JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<h2>Sortable Animation using jquery</h2>
<div class="container drag-drop">
  <ul class="drag-drop-ul" id="drag-drop-ul">
    <li class="a"><span></span></li>
    <li class="b"><span></span></li>
    <li class="c"><span></span></li>
    <li class="d"><span></span></li>
    <li class="e"><span></span></li>
    <li class="f"><span></span></li>
    <li class="g"><span></span></li>
    <li class="h"><span></span></li>
  </ul>
</div>

CSS

body{background: #FEC739;}

h2{font-family: sans-serif; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; font-size: 30px;    text-align: center;
  margin: 50px 0px;    font-family: georgia;}
.container{position:absolute; top: 10%; left: 50%;transform: translateX(-50%);}

.drag-drop{position: relative; display: inline-block;}
.drag-drop-ul{list-style-type: none; margin: 0px; padding: 0px;}
ul.sort-active{background: rgba(0,0,0,0.03);}
.drag-drop-ul li{padding: 10px 10px; border-radius: 1px; margin: 5px 0px;cursor: move; background: #fff;position: relative !important;top: 0px !Important; left: 0px !Important; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1563);}
li:hover{box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.1563); transition: 0.5s all cubic-bezier(0.165, 0.84, 0.44, 1);}
.sort-trans{ transition: 0.5s all cubic-bezier(0.165, 0.84, 0.44, 1);opacity: 0.9;}
li.sort-el{transition: nodne !Important; }
.plcehldr{display: none;}

.drag-drop-ul li:before{opacity: 0.8; content: ""; width: 25px; height: 25px; border-radius: 50%; background: #f1f1f1; display: inline-block;vertical-align: middle;}
.drag-drop-ul li span{width: 180px; display: inline-block;margin-left: 10px;     vertical-align: middle;}
.drag-drop-ul li span:before{content: ""; width: 100%; height: 5px; background: #f1f1f1; display: inline-block;}
.drag-drop-ul li span:after{content: ""; width: 50%; height: 5px; background: #f1f1f1; display: inline-block;margin-top: 5px;}

li.a:before{background: #2ecc71;}
li.b:before{background: #3498db;}
li.c:before{background: #EC644B;}
li.d:before{background: #DCC6E0;}
li.e:before{background: #59ABE3;}
li.f:before{background: #87D37C;}
li.g:before{background: #03A678;}
li.h:before{background: #FDE3A7;}
li.i:before{background: #D2D7D3;}

JavaScript

function init(){
$("#drag-drop-ul").sortable({
  appendTo: 'body',
  placeholder: 'plcehldr',
  start: function(ev, ui){
    isMoved = false;
    init_X = cX = ev.pageX;
    init_Y = cY = ev.pageY;
    sortingEl = ui.item;
    placeholderEl = ui.placeholder;
    sortingEl.addClass("sort-el").siblings().addClass("sort-items sort-trans");
    sortingItems = $(this).find('.sort-items');
    $(this).addClass("sort-active");
    sort_items_length = sortingItems.length;
    if (!isMoved) {
      minTop = sortingEl[0].offsetTop;
      maxTop = sortingEl.parent().outerHeight() - minTop - sortingEl.outerHeight();
      sortingElHeight = sortingEl.outerHeight()+5; // 3 is[margin(top+bottom)/2]
    }
  },
  sort: function(ev,ui){
    isMoved = true;
    cX = ev.pageX;
    cY = ev.pageY;
    new_Y =  cY - init_Y;

    if (new_Y < -minTop){
      new_Y = -minTop;
    }
    if (new_Y > maxTop){
      new_Y = maxTop;
    }
    sortingEl.css({"transform":"translateY("+new_Y+"px)"});

    sortingItems.each(function () {
      var currentEl = $(this);
      if (currentEl[0] === sortingEl[0]) return;
      var currentElOffset = currentEl[0].offsetTop;
      var currentElHeight = currentEl.outerHeight();
      var sortingElOffset = sortingEl[0].offsetTop + new_Y;

      if ((sortingElOffset >= currentElOffset - currentElHeight / 2) && sortingEl.index() < currentEl.index()) {
        currentEl.css({"transform":"translateY(-"+sortingElHeight+"px)"});
        placeholderEl.insertAfter(currentEl);
      }
      else if ((sortingElOffset <= currentElOffset + currentElHeight / 2) && sortingEl.index() > currentEl.index()) {
        currentEl.css({"transform":"translateY("+sortingElHeight+"px)"});
        placeholderEl.insertBefore(currentEl);
        return false;
      }
      else {
        $(this).css({"transform":"translateY(0px)"});
      }
    });
  },
  stop: function(ev,ui){
    $(this).removeClass("sort-active");
    isMoved = false;
   ...