JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<div id="wrapper">
  <input type="text" id="textarea" />
  <button id="add">Add</button>
  <button id="clear">Delete All</button>
</div>
<div id="list"></div>

JavaScript

//DRAGSORT PLUGIN
//GO DOWN TO SEE MY CODES

// jQuery List DragSort v0.5.2
// License: http://dragsort.codeplex.com/license
(function(e) {
  e.fn.dragsort = function(t) {
    if (t == "destroy") {
      e(this.selector).trigger("dragsort-uninit");
      return
    }
    var n = e.extend({}, e.fn.dragsort.defaults, t);
    var r = [];
    var i = null,
      s = null;
    this.each(function(t, o) {
      if (e(o).is("table") && e(o).children().size() == 1 && e(o).children().is("tbody")) o = e(o).children().get(0);
      var u = {
        draggedItem: null,
        placeHolderItem: null,
        pos: null,
        offset: null,
        offsetLimit: null,
        scroll: null,
        container: o,
        init: function() {
          n.tagName = e(this.container).children().size() == 0 ? "li" : e(this.container).children().get(0).tagName.toLowerCase();
          if (n.itemSelector == "") n.itemSelector = n.tagName;
          if (n.dragSelector == "") n.dragSelector = n.tagName;
          if (n.placeHolderTemplate == "") n.placeHolderTemplate = "<" + n.tagName + ">&nbsp;</" + n.tagName + ">";
          e(this.container).attr("data-listidx", t).mousedown(this.grabItem).bind("dragsort-uninit", this.uninit);
          this.styleDragHandlers(true)
        },
        uninit: function() {
          var t = r[e(this).attr("data-listidx")];
          e(t.container).unbind("mousedown", t.grabItem).unbind("dragsort-uninit");
          t.styleDragHandlers(false)
        },
        getItems: function() {
          return e(this.container).children(n.itemSelector)
        },
        styleDragHandlers: function(t) {
          this.getItems().map(function() {
            return e(this).is(n.dragSelector) ? this : e(this).find(n.dragSelector).get()
          }).css("cursor", t ? "pointer" : "")
        },
        grabItem: function(t) {
          var i = r[e(this).attr("data-listidx")];
          var s = e(t.target).closest("[data-listidx] > " + n.tagName).get(0);
          var o...