react-virtual-sortable 1.0.3 → 1.1.0

package/dist/virtual-list.js

@@ -1,5 +1,5 @@
 /*!
- * react-virtual-sortable v1.0.3
+ * react-virtual-sortable v1.1.0
  * open source under the MIT license
  * https://github.com/mfuu/react-virtual-sortable#readme
  */
@@ -145,7 +145,7 @@
   var sortableDnd_min = {exports: {}};
 
   /*!
-   * sortable-dnd v0.6.23
+   * sortable-dnd v0.7.1
    * open source under the MIT license
    * https://github.com/mfuu/sortable-dnd#readme
    */
@@ -180,9 +180,9 @@
         if ("undefined" != typeof window && window.navigator) return !!navigator.userAgent.match(t);
       }
       var r = i(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),
-        s = i(/Edge/i),
+        a = i(/Edge/i),
         l = i(/safari/i) && !i(/chrome/i) && !i(/android/i),
-        a = function () {
+        s = function () {
           var t = !1;
           return document.addEventListener("checkIfSupportPassive", null, {
             get passive() {
@@ -191,23 +191,23 @@
           }), t;
         }();
       function c(t, e, o) {
-        window.addEventListener ? t.addEventListener(e, o, !(!a && r) && n) : window.attachEvent ? t.attachEvent("on" + e, o) : t["on" + e] = o;
+        window.addEventListener ? t.addEventListener(e, o, !(!s && r) && n) : window.attachEvent ? t.attachEvent("on" + e, o) : t["on" + e] = o;
       }
       function h(t, e, o) {
-        window.removeEventListener ? t.removeEventListener(e, o, !(!a && r) && n) : window.detachEvent ? t.detachEvent("on" + e, o) : t["on" + e] = null;
+        window.removeEventListener ? t.removeEventListener(e, o, !(!s && r) && n) : window.detachEvent ? t.detachEvent("on" + e, o) : t["on" + e] = null;
       }
       function u() {
         return document.scrollingElement || document.documentElement;
       }
       function d(t, e, n) {
         if (t.getBoundingClientRect || t === window) {
-          var o, i, r, s, l, a, c;
-          if (t !== window && t.parentNode && t !== u() ? (i = (o = t.getBoundingClientRect()).top, r = o.left, s = o.bottom, l = o.right, a = o.height, c = o.width) : (i = 0, r = 0, s = window.innerHeight, l = window.innerWidth, a = window.innerHeight, c = window.innerWidth), e && t !== window) {
+          var o, i, r, a, l, s, c;
+          if (t !== window && t.parentNode && t !== u() ? (i = (o = t.getBoundingClientRect()).top, r = o.left, a = o.bottom, l = o.right, s = o.height, c = o.width) : (i = 0, r = 0, a = window.innerHeight, l = window.innerWidth, s = window.innerHeight, c = window.innerWidth), e && t !== window) {
             n = n || t.parentNode;
             do {
               if (n && n.getBoundingClientRect) {
                 var h = n.getBoundingClientRect();
-                i -= h.top + parseInt(S(n, "border-top-width")), r -= h.left + parseInt(S(n, "border-left-width")), s = i + o.height, l = r + o.width;
+                i -= h.top + parseInt(S(n, "border-top-width")), r -= h.left + parseInt(S(n, "border-left-width")), a = i + o.height, l = r + o.width;
                 break;
               }
             } while (n = n.parentNode);
@@ -215,10 +215,10 @@
           return {
             top: i,
             left: r,
-            bottom: s,
+            bottom: a,
             right: l,
             width: c,
-            height: a
+            height: s
           };
         }
       }
@@ -226,7 +226,7 @@
         if (t) {
           n = n || document;
           do {
-            if (null != e && (">" === e[0] ? t.parentNode === n && b(t, e) : b(t, e)) || o && t === n) return t;
+            if (null != e && (">" === e[0] ? t.parentNode === n && y(t, e) : y(t, e)) || o && t === n) return t;
             if (t === n) break;
           } while (t = t.parentNode);
           return null;
@@ -240,49 +240,49 @@
         return !1;
       }
       function m(t, e) {
-        for (var n = t.lastElementChild; n && (n === ot.ghost || "none" === S(n, "display") || e && !b(n, e));) n = n.previousElementSibling;
+        for (var n = t.lastElementChild; n && (n === tt.ghost || "none" === S(n, "display") || e && !y(n, e));) n = n.previousElementSibling;
         return n || null;
       }
-      function g(t, e) {
+      function v(t, e) {
         if (!t || !t.parentNode) return -1;
-        for (var n = 0; t = t.previousElementSibling;) "TEMPLATE" === t.nodeName.toUpperCase() || e && !b(t, e) || "none" === S(t, "display") || n++;
+        for (var n = 0; t = t.previousElementSibling;) t === tt.ghost || "TEMPLATE" === t.nodeName.toUpperCase() || "none" === S(t, "display") || e && !y(t, e) || n++;
         return n;
       }
-      function v(t, e, n, o) {
-        for (var i = 0, r = 0, s = t.children; i < s.length;) {
-          if (s[i] !== ot.ghost && "none" !== S(s[i], "display") && p(s[i], n, t, !1) && (o || s[i] !== ot.dragged)) {
-            if (r === e) return s[i];
+      function g(t, e, n, o) {
+        for (var i = 0, r = 0, a = t.children; i < a.length;) {
+          if (a[i] !== tt.ghost && "none" !== S(a[i], "display") && p(a[i], n, t, !1) && (o || a[i] !== tt.dragged)) {
+            if (r === e) return a[i];
             r++;
           }
           i++;
         }
         return null;
       }
-      function y(t, e) {
+      function w(t, e) {
         var n = S(t),
           o = parseInt(n.width) - parseInt(n.paddingLeft) - parseInt(n.paddingRight) - parseInt(n.borderLeftWidth) - parseInt(n.borderRightWidth),
-          i = v(t, 0, e),
-          l = v(t, 1, e),
-          a = i && S(i),
+          i = g(t, 0, e),
+          l = g(t, 1, e),
+          s = i && S(i),
           c = l && S(l),
-          h = a && parseInt(a.marginLeft) + parseInt(a.marginRight) + d(i).width,
+          h = s && parseInt(s.marginLeft) + parseInt(s.marginRight) + d(i).width,
           u = c && parseInt(c.marginLeft) + parseInt(c.marginRight) + d(l).width,
-          p = s || r ? "cssFloat" : "float";
+          p = a || r ? "cssFloat" : "float";
         if ("flex" === n.display) return "column" === n.flexDirection || "column-reverse" === n.flexDirection ? "vertical" : "horizontal";
         if ("grid" === n.display) return n.gridTemplateColumns.split(" ").length <= 1 ? "vertical" : "horizontal";
-        if (i && a.float && "none" !== a.float) {
-          var f = "left" === a.float ? "left" : "right";
+        if (i && s.float && "none" !== s.float) {
+          var f = "left" === s.float ? "left" : "right";
           return !l || "both" !== c.clear && c.clear !== f ? "horizontal" : "vertical";
         }
-        return i && ("block" === a.display || "flex" === a.display || "table" === a.display || "grid" === a.display || h >= o && "none" === n[p] || l && "none" === n[p] && h + u > o) ? "vertical" : "horizontal";
+        return i && ("block" === s.display || "flex" === s.display || "table" === s.display || "grid" === s.display || h >= o && "none" === n[p] || l && "none" === n[p] && h + u > o) ? "vertical" : "horizontal";
       }
-      function w(t, e, n) {
+      function b(t, e, n) {
         if (t && e) if (t.classList) t.classList[n ? "add" : "remove"](e);else {
           var i = (" " + t.className + " ").replace(o, " ").replace(" " + e + " ", " ");
           t.className = (i + (n ? " " + e : "")).replace(o, " ");
         }
       }
-      function b(t, e) {
+      function y(t, e) {
         if (e) {
           if (">" === e[0] && (e = e.substring(1)), t) try {
             if (t.matches) return t.matches(e);
@@ -302,90 +302,122 @@
         }
       }
       function _(t, e) {
+        return Math.round(t.top) === Math.round(e.top) && Math.round(t.left) === Math.round(e.left) && Math.round(t.height) === Math.round(e.height) && Math.round(t.width) === Math.round(e.width);
+      }
+      function x(t, e) {
         var n,
           o,
           i = (o = e, (n = t).compareDocumentPosition ? n.compareDocumentPosition(o) : n.contains ? (n != o && n.contains(o) && 16) + (n != o && o.contains(n) && 8) + (n.sourceIndex >= 0 && o.sourceIndex >= 0 ? (n.sourceIndex < o.sourceIndex && 4) + (n.sourceIndex > o.sourceIndex && 2) : 1) : 0);
         return 2 === i ? 1 : 4 === i ? -1 : 0;
       }
-      function x(t) {
+      function E(t) {
         void 0 !== t.preventDefault && t.cancelable && t.preventDefault();
       }
-      function C(e) {
+      function I(e) {
         var n = e.sortable,
           o = e.name,
           i = e.evt,
           r = n.options[o];
-        "function" == typeof r && r(t({}, i));
-      }
-      !function () {
-        if ("undefined" == typeof window || "undefined" == typeof document) return "";
-        var t = window.getComputedStyle(document.documentElement, "") || ["-moz-hidden-iframe"];
-          (Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/) || "" === t.OLink && ["", "o"])[1];
-      }();
-      var D,
-        E,
-        I,
-        M = "Sortable" + Date.now();
-      function T(t) {
+        if ("function" == typeof r) return r(t({}, i));
+      }
+      function C(t) {
+        if ("function" == typeof t) {
+          for (var e = arguments.length, n = new Array(e > 1 ? e - 1 : 0), o = 1; o < e; o++) n[o - 1] = arguments[o];
+          return t.apply(void 0, n);
+        }
+        return t;
+      }
+      var M = "Sortable" + Date.now();
+      function D(t) {
         this.options = t, this.scrollEl = null, this.autoScrollInterval = null;
       }
-      function N(t) {
-        this.options = t, this.stack = [];
+      function T(t) {
+        this.options = t, this.animationStack = [], this.animationCallbackId = null;
       }
-      function P(t) {
-        this.options = t || {}, this.selects = [];
+      function N(t, e) {
+        return Math.sqrt(Math.pow(t.left - e.left, 2) + Math.pow(t.top - e.top, 2));
       }
-      T.prototype = {
+      D.prototype = {
         nulling: function () {
           this.autoScrollInterval && (clearInterval(this.autoScrollInterval), this.autoScrollInterval = null);
         },
         onStarted: function () {
-          var t = this;
-          this.nulling(), this.autoScrollInterval = setInterval(function () {
-            t.autoScroll();
-          });
+          this.nulling(), this.autoScrollInterval = setInterval(this.autoScroll.bind(this));
         },
-        onMove: function (t, e, n) {
-          this.options = n, this.scrollEl = t, this.moveEvent = e;
+        onMove: function (t, e, n, o) {
+          var i = n ? n[M].options : o;
+          !n || i.autoScroll ? (this.options = i, this.scrollEl = function (t, e) {
+            if (!t || !t.getBoundingClientRect) return u();
+            var n = t,
+              o = !1;
+            do {
+              if (n.clientWidth < n.scrollWidth || n.clientHeight < n.scrollHeight) {
+                var i = S(n);
+                if (n.clientWidth < n.scrollWidth && ("auto" == i.overflowX || "scroll" == i.overflowX) || n.clientHeight < n.scrollHeight && ("auto" == i.overflowY || "scroll" == i.overflowY)) {
+                  if (!n.getBoundingClientRect || n === document.body) return u();
+                  if (o || e) return n;
+                  o = !0;
+                }
+              }
+            } while (n = n.parentNode);
+            return u();
+          }(t, !0), this.moveEvent = e) : this.scrollEl = null;
         },
         autoScroll: function () {
-          var t = this.moveEvent,
-            e = this.scrollEl;
-          if (e && void 0 !== t.clientX && void 0 !== t.clientY) {
-            var n = d(e);
-            if (n) {
-              var o = t.clientX,
-                i = t.clientY,
-                r = n.top,
-                s = n.right,
-                l = n.bottom,
-                a = n.left,
-                c = n.height,
-                h = n.width;
-              if (!(i < r || o > s || i > l || o < a)) {
-                var u = this.options,
-                  p = u.scrollThreshold,
-                  f = u.scrollSpeed,
-                  m = e.scrollTop,
-                  g = e.scrollLeft,
-                  v = e.scrollHeight,
-                  y = m > 0 && i >= r && i <= r + p,
-                  w = g + h < e.scrollWidth && o <= s && o >= s - p,
-                  b = m + c < v && i <= l && i >= l - p;
-                g > 0 && o >= a && o <= a + p && (e.scrollLeft += Math.floor(Math.max(-1, (o - a) / p - 1) * f.x)), w && (e.scrollLeft += Math.ceil(Math.min(1, (o - s) / p + 1) * f.x)), y && (e.scrollTop += Math.floor(Math.max(-1, (i - r) / p - 1) * f.y)), b && (e.scrollTop += Math.ceil(Math.min(1, (i - l) / p + 1) * f.y));
+          var t = this.options,
+            e = this.moveEvent,
+            n = this.scrollEl,
+            o = t.scrollThreshold,
+            i = t.scrollSpeed;
+          if (n && void 0 !== e.clientX && void 0 !== e.clientY) {
+            var r = d(n);
+            if (r) {
+              var a = e.clientX,
+                l = e.clientY,
+                s = r.top,
+                c = r.right,
+                h = r.bottom,
+                u = r.left,
+                p = r.height,
+                f = r.width;
+              if (!(l < s || a > c || l > h || a < u)) {
+                var m = n.scrollTop,
+                  v = n.scrollLeft,
+                  g = n.scrollHeight,
+                  w = n.scrollWidth;
+                n.scrollLeft += this.getScrollOffset(a, u, c, o, i.x, v, w, f), n.scrollTop += this.getScrollOffset(l, s, h, o, i.y, m, g, p);
               }
             }
           }
+        },
+        getScrollOffset: function (t, e, n, o, i, r, a, l) {
+          return r > 0 && t >= e && t <= e + o ? Math.max(-1, (t - e) / o - 1) * i : r + l < a && t <= n && t >= n - o ? Math.min(1, (t - n) / o + 1) * i : 0;
         }
-      }, N.prototype = {
+      }, T.prototype = {
         collect: function (t) {
           if (t) {
-            for (var e = d(t), n = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, o = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, i = Math.min(e.right, n), r = Math.min(e.bottom, o), s = Array.prototype.slice.call(t.children), l = [], a = 0, c = s.length; a <= c; a++) {
-              var h = s[a];
-              if (h && h !== ot.ghost && "none" !== S(h, "display")) {
+            for (var e = d(t), n = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, o = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, i = Math.min(e.right, n), r = Math.min(e.bottom, o), a = Array.prototype.slice.call(t.children), l = [], s = 0, c = a.length; s < c; s++) {
+              var h = a[s];
+              if (h !== tt.ghost && "none" !== S(h, "display")) {
                 var u = d(h);
                 if (!(u.bottom < 0 || u.right < 0)) {
-                  if (u.top - u.height > r || u.left - u.width > i) break;
+                  if (0 === l.length && h.previousElementSibling) {
+                    var p = h.previousElementSibling;
+                    do {
+                      if (p && p !== tt.ghost && "none" !== S(p, "display")) break;
+                    } while (p = p.previousElementSibling);
+                    p && l.push({
+                      el: p,
+                      rect: d(p)
+                    });
+                  }
+                  if (u.top - u.height > r || u.left - u.width > i) {
+                    l.push({
+                      el: h,
+                      rect: u
+                    });
+                    break;
+                  }
                   l.push({
                     el: h,
                     rect: u
@@ -393,179 +425,109 @@
                 }
               }
             }
-            this.stack.push(l);
-          }
-        },
-        animate: function () {
-          var t = this.stack.pop();
-          if (t && this.options.animation) for (var e = 0, n = t.length; e < n; e++) {
-            var o = t[e],
-              i = o.el,
-              r = o.rect;
-            this.execute(i, r);
-          }
-        },
-        execute: function (t, e) {
-          var n = d(t);
-          if (n.top !== e.top || n.left !== e.left) {
-            var o = e.left - n.left,
-              i = e.top - n.top;
-            S(t, "transition", ""), S(t, "transform", "translate3d(".concat(o, "px, ").concat(i, "px, 0)")), this.repaintDummy = function (t) {
-              return t.offsetWidth;
-            }(t);
-            var r = this.options,
-              s = r.animation,
-              l = r.easing;
-            S(t, "transition", "transform ".concat(s, "ms ").concat(l ? " " + l : "")), S(t, "transform", "translate3d(0px, 0px, 0px)"), "number" == typeof t.animated && clearTimeout(t.animated), t.animated = setTimeout(function () {
-              S(t, "transition", ""), S(t, "transform", ""), t.animated = null;
-            }, s);
-          }
-        }
-      }, P.prototype = {
-        eventProperties: function () {
-          return {
-            nodes: D || [],
-            clones: E || []
-          };
-        },
-        isActive: function () {
-          return !!D;
-        },
-        nulling: function () {
-          D = E = I = null;
-        },
-        select: function (t) {
-          w(t, this.options.selectedClass, !0), this.selects.push(t), this.selects.sort(function (t, e) {
-            return _(t, e);
-          });
-        },
-        deselect: function (t) {
-          var e = this.selects.indexOf(t);
-          e > -1 && (w(t, this.options.selectedClass, !1), this.selects.splice(e, 1));
-        },
-        useSelectHandle: function (t, e) {
-          var n = this.options.selectHandle;
-          return !!(I = "function" == typeof n && n(t) || "string" == typeof n && b(e, n));
-        },
-        onChoose: function () {
-          !this.options.multiple || 0 === this.selects.length || this.selects.indexOf(ot.dragged) < 0 || (this.selects.sort(function (t, e) {
-            return _(t, e);
-          }), D = this.selects, this.toggleChosenClass(!0));
-        },
-        onDrop: function (t, e, n) {
-          if (D) {
-            var o = ot.dragged,
-              i = ot.clone,
-              r = D.indexOf(o);
-            t !== e && n ? (S(i, "display", "none"), this.toggleVisible(!0), E = D.map(function (t) {
-              return t.cloneNode(!0);
-            }), this.sortElements(E, r, i)) : this.sortElements(D, r, i), t !== e && (e[M].multiplayer.toggleSelected(E || D, "add"), !n && t[M].multiplayer.toggleSelected(D, "remove"));
+            this.animationStack.push(l);
           }
         },
-        onSelect: function (t, e, n, o) {
-          var i = this.options,
-            r = i.multiple,
-            s = i.selectHandle;
-          if (r && (s && I || !s && !n)) {
-            var l = this.selects.indexOf(e);
-            w(e, this.options.selectedClass, l < 0);
-            var a = {
-              from: o.el,
-              event: t,
-              node: e,
-              index: g(e)
-            };
-            l < 0 ? (this.selects.push(e), C({
-              sortable: o,
-              name: "onSelect",
-              evt: a
-            })) : (this.selects.splice(l, 1), C({
-              sortable: o,
-              name: "onDeselect",
-              evt: a
-            })), this.selects.sort(function (t, e) {
-              return _(t, e);
-            });
-          }
-        },
-        toggleChosenClass: function (t) {
-          if (D) for (var e = 0, n = D.length; e < n; e++) w(D[e], this.options.chosenClass, t);
-        },
-        toggleVisible: function (t) {
-          if (D) for (var e = 0, n = D.length; e < n; e++) D[e] != ot.dragged && S(D[e], "display", t ? "" : "none");
-        },
-        toggleSelected: function (t, e) {
-          var n = this;
-          "add" === e ? t.forEach(function (t) {
-            return n.selects.push(t);
-          }) : this.selects = this.selects.filter(function (e) {
-            return t.indexOf(e) < 0;
-          });
+        animate: function (t) {
+          var e = this,
+            n = this.animationStack.pop(),
+            o = this.options.animation;
+          if (!n || !o) return clearTimeout(this.animationCallbackId), void ("function" == typeof t && t());
+          var i = 0;
+          n.forEach(function (t) {
+            var n = 0,
+              r = t.el,
+              a = d(r),
+              l = t.rect,
+              s = r.prevToRect,
+              c = r.prevFromRect;
+            if (r.animating && c && s && _(l, a)) {
+              var h = function (t, e) {
+                var n = "";
+                if ("string" == typeof t) n = t;else do {
+                  var o = S(t, "transform");
+                  o && "none" !== o && (n = o + " " + n);
+                } while (!e && (t = t.parentNode));
+                var i = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;
+                return i && new i(n);
+              }(r, !0);
+              if (h) n = N({
+                top: a.top - h.f,
+                left: a.left - h.e
+              }, a) / N(c, s) * o;
+            }
+            _(l, a) || (r.prevFromRect = l, r.prevToRect = a, n || (n = o), e.execute(r, l, a, n)), n && (i = Math.max(i, n));
+          }), clearTimeout(this.animationCallbackId), i ? this.animationCallbackId = setTimeout(function () {
+            "function" == typeof t && t();
+          }, i) : "function" == typeof t && t();
         },
-        sortElements: function (t, e, n) {
-          for (var o = 0, i = t.length; o < i; o++) if (S(t[o], "display", ""), o < e) n.parentNode.insertBefore(t[o], n);else {
-            var r = o > 0 ? t[o - 1] : n;
-            n.parentNode.insertBefore(t[o], r.nextSibling);
-          }
+        execute: function (t, e, n, o) {
+          var i = this.options.easing || "",
+            r = e.left - n.left,
+            a = e.top - n.top;
+          S(t, "transition", ""), S(t, "transform", "translate3d(".concat(r, "px, ").concat(a, "px, 0)")), this.repaintDummy = function (t) {
+            return t.offsetWidth;
+          }(t), S(t, "transition", "transform ".concat(o, "ms ").concat(i)), S(t, "transform", "translate3d(0px, 0px, 0px)"), "number" == typeof t.animating && clearTimeout(t.animating), t.animating = setTimeout(function () {
+            S(t, "transition", ""), S(t, "transform", ""), t.prevFromRect = null, t.prevToRect = null, t.animating = null;
+          }, o);
         }
       };
-      var O,
-        H,
+      var P,
+        O,
+        R,
         k,
-        L,
+        H,
         X,
         Y,
-        B,
-        R,
+        L,
         W,
+        B,
         A,
         z,
-        V,
         j,
+        F,
         G,
         U,
-        F,
+        V,
         q,
-        J,
         K,
+        J,
         Q,
-        Z,
-        $,
-        tt = [];
-      function et(t) {
+        Z = [];
+      function $(t) {
         var n,
           o,
           i,
           r = {},
-          s = t.group;
-        s && "object" === e(s) || (s = {
-          name: s,
+          a = t.group;
+        a && "object" === e(a) || (a = {
+          name: a,
           pull: !0,
           put: !0,
           revertDrag: !0
-        }), r.name = s.name, r.pull = null === (n = s.pull) || void 0 === n || n, r.put = null === (o = s.put) || void 0 === o || o, r.revertDrag = null === (i = s.revertDrag) || void 0 === i || i, t.group = r;
-      }
-      function nt(t) {
-        var e = F || U;
-        return !(void 0 !== t.clientX && void 0 !== t.clientY && Math.abs(t.clientX - e.clientX) <= 0 && Math.abs(t.clientY - e.clientY) <= 0);
+        }), r.name = a.name, r.pull = null === (n = a.pull) || void 0 === n || n, r.put = null === (o = a.put) || void 0 === o || o, r.revertDrag = null === (i = a.revertDrag) || void 0 === i || i, t.group = r;
       }
-      function ot(e, n) {
+      function tt(e, n) {
         if (!e || !e.nodeType || 1 !== e.nodeType) throw "Sortable-dnd: `el` must be an HTMLElement, not ".concat({}.toString.call(e));
         e[M] = this, this.el = e, this.options = n = t({}, n);
         var o = {
           store: null,
           group: "",
           handle: null,
+          draggable: ">*",
           sortable: !0,
           disabled: !1,
-          multiple: !1,
+          customGhost: null,
           lockAxis: "",
           direction: "",
           animation: 150,
           easing: "",
-          draggable: ">*",
-          selectHandle: null,
-          customGhost: null,
+          chosenClass: "",
+          placeholderClass: "",
+          ghostClass: "",
+          ghostStyle: {},
+          ghostContainer: null,
+          appendToBody: !1,
           autoScroll: !0,
           scrollThreshold: 55,
           scrollSpeed: {
@@ -574,102 +536,89 @@
           },
           delay: 0,
           delayOnTouchOnly: !1,
-          touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
-          ghostClass: "",
-          ghostStyle: {},
-          chosenClass: "",
-          selectedClass: "",
-          placeholderClass: "",
           swapOnDrop: !0,
           removeCloneOnDrop: !0,
-          fallbackOnBody: !1,
+          dropOnAnimationEnd: !1,
           supportTouch: "ontouchstart" in window,
+          touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
           emptyInsertThreshold: -1
         };
-        for (var i in o) !(i in this.options) && (this.options[i] = o[i]);
-        for (var r in et(n), this) "_" === r.charAt(0) && "function" == typeof this[r] && (this[r] = this[r].bind(this));
-        c(e, this.options.supportTouch ? "touchstart" : "mousedown", this._onDrag), this.autoScroller = new T(this.options), this.multiplayer = new P(this.options), this.animator = new N(this.options), tt.push(e);
+        for (var i in o) !(i in n) && (n[i] = o[i]);
+        for (var r in $(n), this) "_" === r.charAt(0) && "function" == typeof this[r] && (this[r] = this[r].bind(this));
+        c(e, n.supportTouch ? "touchstart" : "mousedown", this._onDrag), this.autoScroller = new D(n), this.animator = new T(n), Z.push(e);
       }
-      return ot.prototype = {
-        constructor: ot,
+      return tt.prototype = {
+        constructor: tt,
         _onDrag: function (t) {
-          var e = this;
-          if (!k && !this.options.disabled && this.options.group.pull && (!/mousedown|pointerdown/.test(t.type) || 0 === t.button)) {
-            var n = t.touches && t.touches[0],
-              o = (n || t).target;
-            if (!l || !o || "SELECT" !== o.tagName.toUpperCase()) {
-              var i = p(o, this.options.draggable, this.el);
-              if (i && !i.animated && (U = {
-                event: t,
-                clientX: (n || t).clientX,
-                clientY: (n || t).clientY
-              }, k = i, c(Q = n ? k : document, "mouseup", this._onDrop), c(Q, "touchend", this._onDrop), c(Q, "touchcancel", this._onDrop), !this.multiplayer.useSelectHandle(t, o))) {
-                var a = this.options.handle;
-                if (("function" != typeof a || a(t)) && ("string" != typeof a || p(o, a, k))) {
-                  var h = this.options,
-                    u = h.delay,
-                    d = h.delayOnTouchOnly;
-                  !u || d && !n || s || r ? this._onStart(n, t) : (c(this.el.ownerDocument, "touchmove", this._delayMoveHandler), c(this.el.ownerDocument, "mousemove", this._delayMoveHandler), c(this.el.ownerDocument, "mouseup", this._cancelStart), c(this.el.ownerDocument, "touchend", this._cancelStart), c(this.el.ownerDocument, "touchcancel", this._cancelStart), $ = setTimeout(function () {
-                    return e._onStart(n, t);
-                  }, u)), c(document, "selectstart", x), l && S(document.body, "user-select", "none");
-                }
-              }
-            }
+          var e = this,
+            n = this.el,
+            o = this.options,
+            i = o.handle,
+            s = t.touches && t.touches[0],
+            h = (s || t).target,
+            u = n.ownerDocument;
+          if (!R && !o.disabled && o.group.pull && !(/mousedown|pointerdown/.test(t.type) && 0 !== t.button || l && h && "SELECT" === h.tagName.toUpperCase())) {
+            var d = p(h, o.draggable, n);
+            d && !d.animating && (G = {
+              event: t,
+              clientX: (s || t).clientX,
+              clientY: (s || t).clientY
+            }, R = d, c(q = s ? R : document, "mouseup", this._onDrop), c(q, "touchend", this._onDrop), c(q, "touchcancel", this._onDrop), "function" == typeof i && !i(t) || "string" == typeof i && !p(h, i, R) || (!o.delay || o.delayOnTouchOnly && !s || a || r ? this._onStart(s, t) : (c(u, "touchmove", this._delayedMoveHandler), c(u, "mousemove", this._delayedMoveHandler), c(u, "mouseup", this._cancelStart), c(u, "touchend", this._cancelStart), c(u, "touchcancel", this._cancelStart), this._dragStartTimer = setTimeout(function () {
+              return e._onStart(s, t);
+            }, o.delay))));
           }
         },
-        _delayMoveHandler: function (t) {
+        _delayedMoveHandler: function (t) {
           var e = t.touches ? t.touches[0] : t;
-          Math.max(Math.abs(e.clientX - U.clientX), Math.abs(e.clientY - U.clientY)) >= Math.floor(this.options.touchStartThreshold / (window.devicePixelRatio || 1)) && this._cancelStart();
+          Math.max(Math.abs(e.clientX - G.clientX), Math.abs(e.clientY - G.clientY)) >= Math.floor(this.options.touchStartThreshold / (window.devicePixelRatio || 1)) && this._cancelStart();
         },
         _cancelStart: function () {
-          clearTimeout($), h(this.el.ownerDocument, "touchmove", this._delayMoveHandler), h(this.el.ownerDocument, "mousemove", this._delayMoveHandler), h(this.el.ownerDocument, "mouseup", this._cancelStart), h(this.el.ownerDocument, "touchend", this._cancelStart), h(this.el.ownerDocument, "touchcancel", this._cancelStart), h(document, "selectstart", x), l && S(document.body, "user-select", "");
+          var t = this.el.ownerDocument;
+          clearTimeout(this._dragStartTimer), h(t, "touchmove", this._delayedMoveHandler), h(t, "mousemove", this._delayedMoveHandler), h(t, "mouseup", this._cancelStart), h(t, "touchend", this._cancelStart), h(t, "touchcancel", this._cancelStart);
         },
         _onStart: function (t, e) {
-          x(e);
-          var n = g(k);
-          O = this.el, H = this.el, W = k, V = n, j = n, G = n, J = {
-            to: this.el,
-            target: k,
-            newIndex: n,
+          E(e);
+          var n = this.el,
+            o = this.options,
+            i = v(R);
+          z = i, j = i, F = i, P = n, O = n, X = n, W = R, B = R.parentNode, A = o.group.pull, J = R, K = {
+            to: n,
+            target: R,
+            newIndex: i,
             relative: 0
-          }, K = k, R = this.el, Y = k.cloneNode(!0), A = k.parentNode, z = this.options.group.pull, ot.clone = Y, ot.active = this, ot.dragged = k, this.multiplayer.onChoose(), w(k, this.options.chosenClass, !0), C({
+          }, Y = R.cloneNode(!0), tt.dragged = R, tt.clone = Y, tt.active = this, I({
             sortable: this,
             name: "onChoose",
             evt: this._getEventProperties(e)
-          }), c(Q, t ? "touchmove" : "mousemove", this._nearestSortable);
+          }), b(R, o.chosenClass, !0), c(q, t ? "touchmove" : "mousemove", this._nearestSortable);
           try {
             document.selection ? setTimeout(function () {
               return document.selection.empty();
             }, 0) : window.getSelection().removeAllRanges();
           } catch (t) {}
+          c(document, "selectstart", E), l && S(document.body, "user-select", "none");
         },
         _onStarted: function () {
-          this.animator.collect(A), w(Y, this.options.chosenClass, !0), w(Y, this.options.placeholderClass, !0), this._appendGhost(), this.multiplayer.toggleVisible(!1), S(k, "display", "none"), k.parentNode.insertBefore(Y, k), C({
+          var t = this.options;
+          this.animator.collect(B), this._appendGhost(), b(Y, t.chosenClass, !0), b(Y, t.placeholderClass, !0), R.parentNode.insertBefore(Y, R), S(R, "display", "none"), I({
             sortable: this,
             name: "onDrag",
-            evt: this._getEventProperties(U.event)
+            evt: this._getEventProperties(G.event)
           }), this.animator.animate(), this.autoScroller.onStarted();
         },
-        _getGhostElement: function () {
-          var t = this.options.customGhost;
-          if ("function" == typeof t) {
-            var e = this.multiplayer.selects;
-            return t(this.multiplayer.isActive() ? e : [k]);
-          }
-          return k;
-        },
         _appendGhost: function () {
-          if (!B) {
-            var e = this.options.fallbackOnBody ? document.body : this.el,
-              n = this._getGhostElement();
-            w(B = n.cloneNode(!0), this.options.ghostClass, !0);
-            var o = d(k),
-              i = t({
+          if (!L) {
+            var e = this.options,
+              n = e.appendToBody ? document.body : C(e.ghostContainer, this) || this.el,
+              o = C(e.customGhost, Y) || Y;
+            b(L = o.cloneNode(!0), e.ghostClass, !0);
+            var i = d(R),
+              r = t({
                 position: "fixed",
-                top: o.top,
-                left: o.left,
-                width: o.width,
-                height: o.height,
+                top: i.top,
+                left: i.left,
+                width: i.width,
+                height: i.height,
                 margin: 0,
                 zIndex: 1e5,
                 opacity: "0.8",
@@ -678,224 +627,206 @@
                 transform: "",
                 transition: "",
                 pointerEvents: "none"
-              }, this.options.ghostStyle);
-            for (var r in i) S(B, r, i[r]);
-            ot.ghost = B, e.appendChild(B);
-            var s = (U.clientX - o.left) / parseInt(B.style.width) * 100,
-              l = (U.clientY - o.top) / parseInt(B.style.height) * 100;
-            S(B, "transform-origin", "".concat(s, "% ").concat(l, "%")), S(B, "will-change", "transform");
+              }, e.ghostStyle);
+            for (var a in r) S(L, a, r[a]);
+            tt.ghost = L, n.appendChild(L);
+            var l = (G.clientX - i.left) / parseInt(L.style.width) * 100,
+              s = (G.clientY - i.top) / parseInt(L.style.height) * 100;
+            S(L, "transform-origin", "".concat(l, "% ").concat(s, "%")), S(L, "will-change", "transform");
           }
         },
         _nearestSortable: function (t) {
-          x(t);
+          E(t);
           var e = t.touches && t.touches[0] || t;
-          if (k && nt(e)) {
-            !F && this._onStarted();
+          if (R && function (t) {
+            var e = U || G;
+            return !(void 0 !== t.clientX && void 0 !== t.clientY && Math.abs(t.clientX - e.clientX) <= 0 && Math.abs(t.clientY - e.clientY) <= 0);
+          }(e)) {
+            !U && this._onStarted();
             var n = this.options.lockAxis,
-              o = "x" === n ? U.clientX : e.clientX,
-              i = "y" === n ? U.clientY : e.clientY,
+              o = "x" === n ? G.clientX : e.clientX,
+              i = "y" === n ? G.clientY : e.clientY,
               r = document.elementFromPoint(o, i),
-              s = o - U.clientX,
-              l = i - U.clientY;
-            F = {
+              a = o - G.clientX,
+              l = i - G.clientY;
+            U = {
               event: t,
               clientX: o,
               clientY: i
-            }, S(B, "transform", "translate3d(".concat(s, "px, ").concat(l, "px, 0)"));
-            var a,
+            }, S(L, "transform", "translate3d(".concat(a, "px, ").concat(l, "px, 0)"));
+            var s,
               c,
               h,
-              p = (a = o, c = i, tt.reduce(function (t, e) {
+              u = (s = o, c = i, Z.reduce(function (t, e) {
                 var n = e[M].options.emptyInsertThreshold;
                 if (null != n) {
                   var o = d(e),
-                    i = a >= o.left - n && a <= o.right + n,
+                    i = s >= o.left - n && s <= o.right + n,
                     r = c >= o.top - n && c <= o.bottom + n;
                   return i && r && (!h || h && o.left >= h.left && o.right <= h.right && o.top >= h.top && o.bottom <= h.bottom) && (t = e, h = o), t;
                 }
               }, null));
-            p && p[M]._onMove(t, r);
-            var f = p ? p[M].options : null,
-              m = null;
-            (!p || f.autoScroll) && U && F && (m = function (t, e) {
-              if (!t || !t.getBoundingClientRect) return u();
-              var n = t,
-                o = !1;
-              do {
-                if (n.clientWidth < n.scrollWidth || n.clientHeight < n.scrollHeight) {
-                  var i = S(n);
-                  if (n.clientWidth < n.scrollWidth && ("auto" == i.overflowX || "scroll" == i.overflowX) || n.clientHeight < n.scrollHeight && ("auto" == i.overflowY || "scroll" == i.overflowY)) {
-                    if (!n.getBoundingClientRect || n === document.body) return u();
-                    if (o || e) return n;
-                    o = !0;
-                  }
-                }
-              } while (n = n.parentNode);
-              return u();
-            }(r, !0)), this.autoScroller.onMove(m, F, f || this.options);
+            u && u[M]._onMove(t, r), this.autoScroller.onMove(r, U, u, this.options);
           }
         },
         _allowPut: function () {
-          if (R === this.el) return !0;
-          if (!this.options.group.put) return !1;
           var t = this.options.group,
-            e = t.name,
-            n = t.put,
-            o = R[M].options.group;
-          return n.join && n.indexOf(o.name) > -1 || o.name && e && o.name === e;
+            e = X[M].options.group;
+          return this.el === X || !!t.put && (t.put.join && t.put.indexOf(e.name) > -1 || e.name && t.name && e.name === t.name);
         },
         _getDirection: function () {
-          var t = this.options,
-            e = t.draggable,
-            n = t.direction;
-          return n ? "function" == typeof n ? n.call(F.event, Y, this) : n : y(A, e);
+          var t = this.options.draggable,
+            e = this.options.direction;
+          return e ? C(e, U.event, Y, this) : w(B, t);
         },
         _allowSwap: function () {
-          var t = d(L),
+          var t = d(k),
             e = "vertical" === this._getDirection(),
             n = e ? "top" : "left",
             o = e ? "bottom" : "right",
-            i = L[e ? "offsetHeight" : "offsetWidth"],
-            r = e ? F.clientY : F.clientX,
-            s = r >= t[n] && r < t[o] - i / 2 ? -1 : 1,
-            l = v(A, 0, this.options.draggable),
-            a = m(A),
+            i = k[e ? "offsetHeight" : "offsetWidth"],
+            r = e ? U.clientY : U.clientX,
+            a = r >= t[n] && r < t[o] - i / 2 ? -1 : 1,
+            l = g(B, 0, this.options.draggable),
+            s = m(B),
             c = d(l),
-            h = d(a);
-          if (L === A || f(A, L)) return Y === l && r < c[n] ? (X = L, !0) : Y === a && r > h[o] && (X = L.nextSibling, !0);
-          var u = _(Y, L);
-          return X = u < 0 ? L.nextSibling : L, q !== L ? (Z = s, !0) : Z !== s && (Z = s, s < 0 ? u > 0 : u < 0);
+            h = d(s);
+          if (k === B || f(B, k)) return Y === l && r < c[n] ? (H = k, !0) : Y === s && r > h[o] && (H = k.nextSibling, !0);
+          var u = x(Y, k);
+          return H = u < 0 ? k.nextSibling : k, V !== k ? (Q = a, !0) : Q !== a && (Q = a, a < 0 ? u > 0 : u < 0);
         },
         _onMove: function (t, e) {
-          if (!this.options.disabled && this._allowPut()) {
-            if (L = p(e, this.options.draggable, this.el), C({
+          var n = this.el,
+            o = this.options;
+          if (!o.disabled && this._allowPut()) {
+            if (k = p(e, o.draggable, n), I({
               sortable: this,
               name: "onMove",
               evt: this._getEventProperties(t, {
-                target: L
+                target: k
               })
-            }), this.options.sortable || this.el !== R) return this.el === H || e !== this.el && m(this.el) ? void (L && !L.animated && !f(L, Y) && this._allowSwap() && (L !== Y && X !== Y ? (this.el !== H ? this._onInsert(t) : L !== k && this._onChange(t), q = L) : q = L)) : (L = q = null, void this._onInsert(t));
-            H !== R && (L = q = k, Z = 0, this._onInsert(t));
+            }), o.sortable || n !== X) return n === O || e !== n && m(n) ? void (k && !k.animating && !f(k, Y) && this._allowSwap() && (k !== Y && H !== Y ? (n !== O ? this._onInsert(t) : k !== R && this._onChange(t), V = k) : V = k)) : (k = V = null, void this._onInsert(t));
+            O !== X && (k = V = R, Q = 0, this._onInsert(t));
           }
         },
         _onInsert: function (t) {
-          var e = L || Y,
-            n = "clone" === z && this.el !== R && H === R,
-            o = "clone" === z && this.el === R && H !== R,
-            i = f(L, document),
-            r = L === k && !i,
-            s = H[M],
-            l = R[M];
-          O = this.el, V = g(Y), W = e, A = i ? L.parentNode : this.el, s.animator.collect(Y.parentNode), this.animator.collect(A), n && (J.target = K, J.newIndex = V, J.relative = K === k ? 0 : _(Y, K), S(k, "display", ""), l.multiplayer.toggleVisible(!0), l.options.group.revertDrag || Y.parentNode.insertBefore(k, Y)), o && (V = g(k), S(k, "display", "none"), this.multiplayer.toggleVisible(!1)), S(Y, "display", r ? "none" : ""), L && i ? A.insertBefore(Y, Z < 0 ? L : L.nextSibling) : A.appendChild(Y), j = r ? G : g(Y), n && l.options.group.revertDrag && (J.target = k, J.newIndex = G, J.relative = 0, C({
-            sortable: l,
+          var e = this.el,
+            n = k || Y,
+            o = "clone" === A && e !== X && O === X,
+            i = "clone" === A && e === X && O !== X,
+            r = f(k, document),
+            a = k === R && !r,
+            l = O[M],
+            s = X[M];
+          P = e, z = v(Y), W = n, B = r ? k.parentNode : e, l.animator.collect(Y.parentNode), this.animator.collect(B), o && (K.target = J, K.newIndex = z, K.relative = J === R ? 0 : x(Y, J), S(R, "display", ""), s.options.group.revertDrag || Y.parentNode.insertBefore(R, Y)), i && (z = v(R), S(R, "display", "none")), S(Y, "display", a ? "none" : ""), k && r ? B.insertBefore(Y, Q < 0 ? k : k.nextSibling) : B.appendChild(Y), j = a ? F : v(Y), o && s.options.group.revertDrag && (K.target = R, K.newIndex = F, K.relative = 0, I({
+            sortable: s,
             name: "onChange",
             evt: this._getEventProperties(t, {
-              to: R,
-              target: k,
-              newIndex: G,
+              to: X,
+              target: R,
+              newIndex: F,
               revertDrag: !0
             })
-          })), n || C({
-            sortable: s,
+          })), o || I({
+            sortable: l,
             name: "onRemove",
             evt: this._getEventProperties(t, {
               newIndex: -1
             })
-          }), o && e !== k && (K = e, C({
+          }), i && n !== R && (J = n, I({
             sortable: this,
             name: "onChange",
             evt: this._getEventProperties(t, {
-              from: R,
+              from: X,
               backToOrigin: !0
             })
-          })), o || C({
+          })), i || I({
             sortable: this,
             name: "onAdd",
             evt: this._getEventProperties(t, {
               oldIndex: -1
             })
-          }), s.animator.animate(), this.animator.animate(), H = this.el;
+          }), l.animator.animate(), this.animator.animate(), O = e;
         },
         _onChange: function (t) {
-          this.animator.collect(A), V = g(Y), A = L.parentNode, W = L, this.el === R && (K = L), A.insertBefore(Y, X), j = g(Y), C({
+          var e = this.el;
+          this.animator.collect(B), z = v(Y), B = k.parentNode, W = k, e === X && (J = k), B.insertBefore(Y, H), j = v(Y), I({
             sortable: this,
             name: "onChange",
             evt: this._getEventProperties(t)
-          }), this.animator.animate(), H = this.el;
+          }), this.animator.animate(), O = e;
         },
         _onDrop: function (t) {
-          this._cancelStart(), h(Q, "touchmove", this._nearestSortable), h(Q, "mousemove", this._nearestSortable), h(Q, "mouseup", this._onDrop), h(Q, "touchend", this._onDrop), h(Q, "touchcancel", this._onDrop), R && (H = R, V = G, W === Y && (W = k), this.animator.collect(A), this.multiplayer.toggleChosenClass(!1), w(k, this.options.chosenClass, !1), C({
-            sortable: this,
-            name: "onUnchoose",
-            evt: this._getEventProperties(t)
-          }), F && this._onEnd(t), !F && this.animator.animate()), !nt(t.changedTouches ? t.changedTouches[0] : t) && this.multiplayer.onSelect(t, k, R, this), B && B.parentNode && B.parentNode.removeChild(B), this._nulling();
+          var e = this,
+            n = this.options;
+          if (this._cancelStart(), h(q, "touchmove", this._nearestSortable), h(q, "mousemove", this._nearestSortable), h(q, "mouseup", this._onDrop), h(q, "touchend", this._onDrop), h(q, "touchcancel", this._onDrop), h(document, "selectstart", E), l && S(document.body, "user-select", ""), L && L.parentNode && L.parentNode.removeChild(L), X) {
+            if (O = X, z = F, W === Y && (W = R), b(R, n.chosenClass, !1), I({
+              sortable: this,
+              name: "onUnchoose",
+              evt: this._getEventProperties(t)
+            }), U) {
+              this.animator.collect(B), b(Y, n.chosenClass, !1), b(Y, n.placeholderClass, !1);
+              var o = this._getEventProperties(t);
+              !n.dropOnAnimationEnd && this._onEnd(o), this.animator.animate(function () {
+                n.dropOnAnimationEnd && e._onEnd(o);
+              });
+            } else this._nulling();
+          } else this._nulling();
         },
         _onEnd: function (e) {
-          w(Y, this.options.chosenClass, !1), w(Y, this.options.placeholderClass, !1);
-          var n = "clone" === z;
-          this.multiplayer.onDrop(H, O, n);
-          var o = this._getEventProperties(e),
-            i = this.options,
-            r = i.swapOnDrop,
-            s = i.removeCloneOnDrop;
-          n && H !== O || !("function" == typeof r ? r(o) : r) || A.insertBefore(k, Y), n && H !== O && !this.multiplayer.isActive() || !("function" == typeof s ? s(o) : s) || Y && Y.parentNode && Y.parentNode.removeChild(Y), S(k, "display", ""), this.animator.animate(), H !== O && C({
-            sortable: H[M],
+          var n = this.options,
+            o = "clone" === A,
+            i = O === P;
+          o && !i || !C(n.swapOnDrop, e) || B.insertBefore(R, Y), o && !i || !C(n.removeCloneOnDrop, e) || Y && Y.parentNode && Y.parentNode.removeChild(Y), S(R, "display", ""), O !== P && I({
+            sortable: O[M],
             name: "onDrop",
-            evt: t({}, o, n ? J : {
+            evt: t({}, e, o ? K : {
               newIndex: -1
             })
-          }), C({
-            sortable: O[M],
+          }), I({
+            sortable: P[M],
             name: "onDrop",
-            evt: t({}, o, H === O ? {} : {
+            evt: t({}, e, i ? {} : {
               oldIndex: -1
             })
-          });
+          }), this._nulling();
         },
         _getEventProperties: function (e) {
           var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
             o = {};
-          return o.event = e, o.to = O, o.from = H, o.node = k, o.clone = Y, o.target = W, o.oldIndex = V, o.newIndex = j, o.pullMode = z, t(o, this.multiplayer.eventProperties(), n), o.relative = W === k ? 0 : _(Y, W), o;
+          return o.event = e, o.to = P, o.from = O, o.node = R, o.clone = Y, o.target = W, o.oldIndex = z, o.newIndex = j, o.pullMode = A, t(o, n), o.relative = W === R ? 0 : x(Y, W), o;
         },
         _nulling: function () {
-          O = H = k = L = X = Y = B = R = W = A = z = V = j = G = U = F = q = J = K = Q = Z = $ = ot.clone = ot.ghost = ot.active = ot.dragged = null, this.multiplayer.nulling(), this.autoScroller.nulling();
+          P = O = R = k = H = X = Y = L = W = B = A = z = j = F = G = U = V = q = K = J = Q = tt.clone = tt.ghost = tt.active = tt.dragged = null, this.autoScroller.nulling();
         },
         destroy: function () {
           this._cancelStart(), this._nulling(), h(this.el, "touchstart", this._onDrag), h(this.el, "mousedown", this._onDrag);
-          var t = tt.indexOf(this.el);
-          t > -1 && tt.splice(t, 1), this.el[M] = this.animator = this.multiplayer = this.autoScroller = null;
+          var t = Z.indexOf(this.el);
+          t > -1 && Z.splice(t, 1), this.el[M] = this.animator = this.autoScroller = null;
         },
         option: function (t, e) {
           if (void 0 === e) return this.options[t];
-          this.options[t] = e, this.animator.options[t] = e, this.multiplayer.options[t] = e, this.autoScroller.options[t] = e, "group" === t && et(this.options);
-        },
-        select: function (t) {
-          this.multiplayer.select(t);
-        },
-        deselect: function (t) {
-          this.multiplayer.deselect(t);
-        },
-        getSelectedElements: function () {
-          return this.multiplayer.selects;
+          this.options[t] = e, this.animator.options[t] = e, this.autoScroller.options[t] = e, "group" === t && $(this.options);
         }
-      }, ot.utils = {
+      }, tt.utils = {
         on: c,
         off: h,
         css: S,
-        index: g,
+        index: v,
+        matches: y,
         closest: p,
         getRect: d,
-        toggleClass: w,
-        detectDirection: y
-      }, ot.get = function (t) {
+        toggleClass: b,
+        detectDirection: w
+      }, tt.get = function (t) {
         return t[M];
-      }, ot.create = function (t, e) {
-        return new ot(t, e);
-      }, ot;
+      }, tt.create = function (t, e) {
+        return new tt(t, e);
+      }, tt;
     });
   })(sortableDnd_min, sortableDnd_min.exports);
   var sortableDnd_minExports = sortableDnd_min.exports;
-  var Dnd = /*@__PURE__*/getDefaultExportFromCjs(sortableDnd_minExports);
+  var Sortable = /*@__PURE__*/getDefaultExportFromCjs(sortableDnd_minExports);
 
   function throttle(fn, wait) {
     var timer;
@@ -926,15 +857,26 @@
     var throttled = throttle(fn, wait);
     var result = function result() {
       throttled['cancel']();
-      throttled.apply(this, arguments);
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      throttled.apply(this, args);
     };
     result['cancel'] = function () {
       throttled['cancel']();
     };
     return result;
   }
-  function isSameValue(a, b) {
-    return a === 0 ? a === b : a == b;
+  function isEqual(a, b) {
+    // 0 & -0
+    if (a === 0 && b === 0) {
+      return 1 / a === 1 / b;
+    }
+    // NaN
+    if (Number.isNaN(a) && Number.isNaN(b)) {
+      return true;
+    }
+    return a == b;
   }
   function getDataKey(item, dataKey) {
     return (!Array.isArray(dataKey) ? dataKey.replace(/\[/g, '.').replace(/\]/g, '.').split('.') : dataKey).reduce(function (o, k) {
@@ -945,186 +887,6 @@
     return element instanceof Document && element.nodeType === 9 || element instanceof Window;
   }
 
-  var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'scrollSpeed', 'fallbackOnBody', 'scrollThreshold', 'delayOnTouchOnly', 'placeholderClass'];
-  var Sortable = /*#__PURE__*/function () {
-    function Sortable(el, options) {
-      _classCallCheck(this, Sortable);
-      this.el = el;
-      this.options = options;
-      this.rangeChanged = false;
-      this.installSortable();
-    }
-    _createClass(Sortable, [{
-      key: "destroy",
-      value: function destroy() {
-        this.sortable.destroy();
-        this.rangeChanged = false;
-      }
-    }, {
-      key: "option",
-      value: function option(key, value) {
-        this.options[key] = value;
-        if (SortableAttrs.includes(key)) {
-          this.sortable.option(key, value);
-        }
-      }
-    }, {
-      key: "installSortable",
-      value: function installSortable() {
-        var _this = this;
-        var props = SortableAttrs.reduce(function (res, key) {
-          res[key] = _this.options[key];
-          return res;
-        }, {});
-        this.sortable = new Dnd(this.el, Object.assign(Object.assign({}, props), {
-          emptyInsertThreshold: 0,
-          swapOnDrop: function swapOnDrop(event) {
-            return event.from === event.to;
-          },
-          removeCloneOnDrop: function removeCloneOnDrop(event) {
-            return event.from === event.to;
-          },
-          onDrag: function onDrag(event) {
-            return _this.onDrag(event);
-          },
-          onDrop: function onDrop(event) {
-            return _this.onDrop(event);
-          },
-          onChoose: function onChoose(event) {
-            return _this.onChoose(event);
-          },
-          onUnchoose: function onUnchoose(event) {
-            return _this.onUnchoose(event);
-          }
-        }));
-      }
-    }, {
-      key: "onChoose",
-      value: function onChoose(event) {
-        this.dispatchEvent('onChoose', event);
-      }
-    }, {
-      key: "onUnchoose",
-      value: function onUnchoose(event) {
-        this.dispatchEvent('onUnchoose', event);
-      }
-    }, {
-      key: "onDrag",
-      value: function onDrag(event) {
-        var dataKey = event.node.getAttribute('data-key');
-        var index = this.getIndex(dataKey);
-        var item = this.options.list[index];
-        var key = this.options.uniqueKeys[index];
-        // store the dragged item
-        this.sortable.option('store', {
-          item: item,
-          key: key,
-          index: index
-        });
-        this.dispatchEvent('onDrag', {
-          item: item,
-          key: key,
-          index: index,
-          event: event
-        });
-      }
-    }, {
-      key: "onDrop",
-      value: function onDrop(event) {
-        var _a, _b, _c;
-        var _ref = (_a = Dnd.get(event.from)) === null || _a === void 0 ? void 0 : _a.option('store'),
-          item = _ref.item,
-          key = _ref.key,
-          index = _ref.index;
-        var list = this.options.list;
-        var params = {
-          key: key,
-          item: item,
-          list: list,
-          event: event,
-          changed: false,
-          oldList: _toConsumableArray(list),
-          oldIndex: index,
-          newIndex: index
-        };
-        if (!(event.from === event.to && event.node === event.target)) {
-          this.handleDropEvent(event, params, index);
-        }
-        this.dispatchEvent('onDrop', params);
-        if (event.from === this.el && this.rangeChanged) {
-          (_b = Dnd.dragged) === null || _b === void 0 ? void 0 : _b.remove();
-        }
-        if (event.from !== event.to) {
-          (_c = Dnd.clone) === null || _c === void 0 ? void 0 : _c.remove();
-        }
-        this.rangeChanged = false;
-      }
-    }, {
-      key: "handleDropEvent",
-      value: function handleDropEvent(event, params, index) {
-        var targetKey = event.target.getAttribute('data-key');
-        var newIndex = -1;
-        var oldIndex = index;
-        // changes position in current list
-        if (event.from === event.to) {
-          // re-get the dragged element's index
-          oldIndex = this.getIndex(params.key);
-          newIndex = this.getIndex(targetKey);
-          if (oldIndex < newIndex && event.relative === -1 || oldIndex > newIndex && event.relative === 1) {
-            newIndex += event.relative;
-          }
-          if (newIndex !== oldIndex) {
-            params.list.splice(oldIndex, 1);
-            params.list.splice(newIndex, 0, params.item);
-          }
-        } else {
-          // remove from
-          if (event.from === this.el) {
-            oldIndex = this.getIndex(params.key);
-            params.list.splice(oldIndex, 1);
-          }
-          // added to
-          if (event.to === this.el) {
-            oldIndex = -1;
-            newIndex = this.getIndex(targetKey);
-            if (event.relative === 0) {
-              // added to last
-              newIndex = params.list.length;
-            } else if (event.relative === 1) {
-              newIndex += event.relative;
-            }
-            params.list.splice(newIndex, 0, params.item);
-          }
-        }
-        params.changed = event.from !== event.to || newIndex !== oldIndex;
-        params.oldIndex = oldIndex;
-        params.newIndex = newIndex;
-      }
-    }, {
-      key: "getIndex",
-      value: function getIndex(key) {
-        if (key === null || key === undefined) {
-          return -1;
-        }
-        var uniqueKeys = this.options.uniqueKeys;
-        for (var i = 0, len = uniqueKeys.length; i < len; i++) {
-          if (isSameValue(uniqueKeys[i], key)) {
-            return i;
-          }
-        }
-        return -1;
-      }
-    }, {
-      key: "dispatchEvent",
-      value: function dispatchEvent(name, params) {
-        var cb = this.options[name];
-        cb && cb(params);
-      }
-    }]);
-    return Sortable;
-  }();
-
-  var VirtualAttrs = ['size', 'keeps', 'scroller', 'direction', 'debounceTime', 'throttleTime'];
   var Virtual = /*#__PURE__*/function () {
     function Virtual(options) {
       _classCallCheck(this, Virtual);
@@ -1160,7 +922,7 @@
       this.addScrollEventListener();
       this.checkIfUpdate(0, options.keeps - 1);
     }
-    _createClass(Virtual, [{
+    return _createClass(Virtual, [{
       key: "isFixed",
       value: function isFixed() {
         return this.sizeType === 'FIXED';
@@ -1212,12 +974,34 @@
     }, {
       key: "scrollToIndex",
       value: function scrollToIndex(index) {
+        var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
         if (index >= this.options.uniqueKeys.length - 1) {
           this.scrollToBottom();
-        } else {
-          var indexOffset = this.getOffsetByRange(0, index);
-          var startOffset = this.getScrollStartOffset();
-          this.scrollToOffset(indexOffset + startOffset);
+          return;
+        }
+        if (index < 0) {
+          this.scrollToOffset(0);
+          return;
+        }
+        var offset = this.getOffset();
+        var clientSize = this.getClientSize();
+        // calc item position
+        var itemSize = this.getSize(this.options.uniqueKeys[index]);
+        var itemTop = this.getOffsetByRange(0, index) + this.getScrollStartOffset();
+        var itemBottom = itemTop + itemSize;
+        var viewportTop = offset;
+        var viewportBottom = offset + clientSize;
+        if (align === 'auto') {
+          if (itemTop >= viewportTop && itemBottom <= viewportBottom) {
+            return;
+          }
+          align = itemTop < viewportTop ? 'top' : 'bottom';
+        }
+        if (align === 'top') {
+          this.scrollToOffset(itemTop);
+        } else if (align === 'bottom') {
+          var targetOffset = Math.max(0, itemBottom - clientSize);
+          this.scrollToOffset(targetOffset);
         }
       }
     }, {
@@ -1228,14 +1012,16 @@
         this.scrollToOffset(offset);
         // if the bottom is not reached, execute the scroll method again
         setTimeout(function () {
-          var clientSize = _this.getClientSize();
-          var scrollSize = _this.getScrollSize();
-          var scrollOffset = _this.getOffset();
-          if (scrollOffset + clientSize + 1 < scrollSize) {
+          if (!_this.isReachedBottom()) {
             _this.scrollToBottom();
           }
         }, 5);
       }
+    }, {
+      key: "isReachedBottom",
+      value: function isReachedBottom() {
+        return this.getOffset() + this.getClientSize() + 1 >= this.getScrollSize();
+      }
     }, {
       key: "option",
       value: function option(key, value) {
@@ -1250,7 +1036,7 @@
           });
         }
         if (key === 'scroller') {
-          oldValue && Dnd.utils.off(oldValue, 'scroll', this.onScroll);
+          oldValue && Sortable.utils.off(oldValue, 'scroll', this.onScroll);
           this.updateScrollElement();
           this.addScrollEventListener();
         }
@@ -1267,8 +1053,8 @@
         this.handleUpdate(start);
       }
     }, {
-      key: "onItemResized",
-      value: function onItemResized(key, size) {
+      key: "updateItemSize",
+      value: function updateItemSize(key, size) {
         if (!size || this.sizes.get(key) === size) {
           return;
         }
@@ -1297,21 +1083,21 @@
       key: "addScrollEventListener",
       value: function addScrollEventListener() {
         if (this.options.scroller) {
-          Dnd.utils.on(this.options.scroller, 'scroll', this.onScroll);
+          Sortable.utils.on(this.options.scroller, 'scroll', this.onScroll);
         }
       }
     }, {
       key: "removeScrollEventListener",
       value: function removeScrollEventListener() {
         if (this.options.scroller) {
-          Dnd.utils.off(this.options.scroller, 'scroll', this.onScroll);
+          Sortable.utils.off(this.options.scroller, 'scroll', this.onScroll);
         }
       }
     }, {
       key: "enableScroll",
       value: function enableScroll(scrollable) {
         var scroller = this.options.scroller;
-        var eventFn = scrollable ? Dnd.utils.off : Dnd.utils.on;
+        var eventFn = scrollable ? Sortable.utils.off : Sortable.utils.on;
         var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
         eventFn(scroller, 'DOMMouseScroll', this.preventDefault);
         eventFn(scroller, wheelEvent, this.preventDefault);
@@ -1458,11 +1244,12 @@
     }, {
       key: "handleUpdate",
       value: function handleUpdate(start) {
+        var rangeChanged = this.range.start !== start;
         this.range.start = start;
         this.range.end = this.getEndByStart(start);
         this.range.front = this.getFrontOffset();
         this.range.behind = this.getBehindOffset();
-        this.options.onUpdate(Object.assign({}, this.range));
+        this.options.onUpdate(Object.assign({}, this.range), rangeChanged);
       }
     }, {
       key: "getFrontOffset",
@@ -1526,20 +1313,234 @@
         var offset = 0;
         if (scroller && wrapper) {
           var offsetKey = this.isHorizontal() ? 'left' : 'top';
-          var rect = elementIsDocumentOrWindow(scroller) ? Dnd.utils.getRect(wrapper) : Dnd.utils.getRect(wrapper, true, scroller);
+          var rect = elementIsDocumentOrWindow(scroller) ? Sortable.utils.getRect(wrapper) : Sortable.utils.getRect(wrapper, true, scroller);
           offset = this.offset + rect[offsetKey];
         }
         return offset;
       }
     }]);
-    return Virtual;
+  }();
+
+  var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'scrollSpeed', 'appendToBody', 'ghostContainer', 'scrollThreshold', 'delayOnTouchOnly', 'placeholderClass', 'dropOnAnimationEnd'];
+  var VirtualAttrs = ['size', 'keeps', 'scroller', 'direction', 'uniqueKeys', 'debounceTime', 'throttleTime'];
+  var VirtualSortable = /*#__PURE__*/function () {
+    function VirtualSortable(el, options) {
+      _classCallCheck(this, VirtualSortable);
+      this.el = el;
+      this.options = options;
+      this.initVirtual();
+      this.initSortable();
+    }
+    return _createClass(VirtualSortable, [{
+      key: "destroy",
+      value: function destroy() {
+        this.virtual.removeScrollEventListener();
+        this.sortable.destroy();
+      }
+    }, {
+      key: "option",
+      value: function option(key, value) {
+        this.options[key] = value;
+        if (VirtualAttrs.includes(key)) {
+          this.virtual.option(key, value);
+        }
+        if (SortableAttrs.includes(key)) {
+          this.sortable.option(key, value);
+        }
+      }
+    }, {
+      key: "call",
+      value: function call(method) {
+        if (method in this.virtual) {
+          var func = this.virtual[method];
+          if (typeof func === 'function') {
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+              args[_key - 1] = arguments[_key];
+            }
+            return func.apply(this.virtual, args);
+          }
+          throw new Error("Property ".concat(String(method), " is not a function on Virtual."));
+        } else {
+          throw new Error("Method ".concat(String(method), " does not exist on Virtual."));
+        }
+      }
+      // ========================================== virtual ==========================================
+    }, {
+      key: "initVirtual",
+      value: function initVirtual() {
+        var _this = this;
+        var props = VirtualAttrs.reduce(function (res, key) {
+          res[key] = _this.options[key];
+          return res;
+        }, {});
+        this.virtual = new Virtual(Object.assign(Object.assign({}, props), {
+          buffer: this.options.buffer,
+          wrapper: this.options.wrapper,
+          scroller: this.options.scroller,
+          uniqueKeys: this.options.uniqueKeys,
+          onScroll: function onScroll(event) {
+            return _this.onScroll(event);
+          },
+          onUpdate: function onUpdate(range, changed) {
+            return _this.onUpdate(range, changed);
+          }
+        }));
+      }
+    }, {
+      key: "onScroll",
+      value: function onScroll(event) {
+        this.dispatchEvent('onScroll', event);
+      }
+    }, {
+      key: "onUpdate",
+      value: function onUpdate(range, changed) {
+        if (this.sortableState === 'dragging' && changed) {
+          this.removeDraggedEl = true;
+        }
+        this.dispatchEvent('onUpdate', range, changed);
+      }
+      // ========================================== sortable ==========================================
+    }, {
+      key: "initSortable",
+      value: function initSortable() {
+        var _this2 = this;
+        var props = SortableAttrs.reduce(function (res, key) {
+          res[key] = _this2.options[key];
+          return res;
+        }, {});
+        this.sortable = new Sortable(this.el, Object.assign(Object.assign({}, props), {
+          emptyInsertThreshold: 0,
+          swapOnDrop: false,
+          removeCloneOnDrop: function removeCloneOnDrop(event) {
+            return event.from === event.to;
+          },
+          onDrag: function onDrag(event) {
+            return _this2.onDrag(event);
+          },
+          onDrop: function onDrop(event) {
+            return _this2.onDrop(event);
+          }
+        }));
+      }
+    }, {
+      key: "onDrag",
+      value: function onDrag(event) {
+        this.sortableState = 'dragging';
+        var key = event.node.getAttribute('data-key');
+        var index = this.getIndex(key);
+        // store the dragged item
+        this.sortable.option('store', {
+          key: key,
+          index: index
+        });
+        this.dispatchEvent('onDrag', {
+          key: key,
+          index: index,
+          event: event
+        });
+      }
+    }, {
+      key: "onDrop",
+      value: function onDrop(event) {
+        var _a, _b;
+        var _Sortable$get$option = Sortable.get(event.from).option('store'),
+          key = _Sortable$get$option.key,
+          index = _Sortable$get$option.index;
+        var evt = {
+          key: key,
+          event: event,
+          changed: false,
+          oldIndex: index,
+          newIndex: index
+        };
+        if (!(event.from === event.to && event.node === event.target)) {
+          var eventProps = this.getEventProperties(evt, event);
+          Object.assign(evt, eventProps);
+        }
+        this.dispatchEvent('onDrop', evt);
+        if (event.from === this.el && this.removeDraggedEl) {
+          (_a = Sortable.dragged) === null || _a === void 0 ? void 0 : _a.remove();
+        }
+        if (event.from !== event.to) {
+          (_b = Sortable.clone) === null || _b === void 0 ? void 0 : _b.remove();
+        }
+        this.sortableState = '';
+        this.removeDraggedEl = false;
+      }
+    }, {
+      key: "getEventProperties",
+      value: function getEventProperties(evt, event) {
+        var key = evt.key;
+        var index = evt.oldIndex;
+        var targetKey = event.target.getAttribute('data-key');
+        var newIndex = -1;
+        var oldIndex = index;
+        // changes position in current list
+        if (event.from === event.to) {
+          // re-get the dragged element's index
+          oldIndex = this.getIndex(key);
+          newIndex = this.getIndex(targetKey);
+          if (oldIndex < newIndex && event.relative === -1 || oldIndex > newIndex && event.relative === 1) {
+            newIndex += event.relative;
+          }
+        } else {
+          // removed from current list
+          if (event.from === this.el) {
+            oldIndex = this.getIndex(key);
+          }
+          // added to another list
+          if (event.to === this.el) {
+            oldIndex = -1;
+            newIndex = this.getIndex(targetKey);
+            if (event.relative === 0) {
+              // added to last
+              newIndex = this.options.uniqueKeys.length;
+            } else if (event.relative === 1) {
+              newIndex += event.relative;
+            }
+          }
+        }
+        return {
+          changed: event.from !== event.to || newIndex !== oldIndex,
+          oldIndex: oldIndex,
+          newIndex: newIndex
+        };
+      }
+    }, {
+      key: "getIndex",
+      value: function getIndex(key) {
+        if (key === null || key === undefined) {
+          return -1;
+        }
+        var uniqueKeys = this.options.uniqueKeys;
+        for (var i = 0, len = uniqueKeys.length; i < len; i++) {
+          if (isEqual(uniqueKeys[i], key)) {
+            return i;
+          }
+        }
+        return -1;
+      }
+    }, {
+      key: "dispatchEvent",
+      value: function dispatchEvent(name) {
+        // call only when the option exists
+        if (name in this.options) {
+          var func = this.options[name];
+          if (typeof func === 'function') {
+            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+              args[_key2 - 1] = arguments[_key2];
+            }
+            return func.apply(this, args);
+          }
+        }
+      }
+    }]);
   }();
 
   function Item(props) {
     var dataKey = props.dataKey,
-      sizeKey = props.sizeKey,
+      horizontal = props.horizontal,
       dragging = props.dragging,
-      chosenKey = props.chosenKey,
       children = props.children,
       onSizeChange = props.onSizeChange;
     var eleRef = React__namespace.useRef(null);
@@ -1547,6 +1548,7 @@
       var observer;
       if ((typeof ResizeObserver === "undefined" ? "undefined" : _typeof(ResizeObserver)) !== undefined) {
         observer = new ResizeObserver(function () {
+          var sizeKey = horizontal ? 'offsetWidth' : 'offsetHeight';
           var size = eleRef.current[sizeKey];
           onSizeChange(dataKey, size);
         });
@@ -1561,14 +1563,11 @@
     }, [eleRef]);
     var itemStyle = React__namespace.useMemo(function () {
       var style = children.props.style || {};
-      var isChosen = isSameValue(dataKey, chosenKey);
-      if (dragging && isChosen) {
-        return Object.assign(style, {
-          display: 'none'
-        });
-      }
-      return style;
-    }, [chosenKey, dragging]);
+      var isDragging = isEqual(dataKey, dragging);
+      return Object.assign(Object.assign({}, style), {
+        display: isDragging ? 'none' : ''
+      });
+    }, [dragging]);
     return /*#__PURE__*/React__namespace.cloneElement(children, {
       'data-key': dataKey,
       role: 'item',
@@ -1584,35 +1583,30 @@
       start = props.start,
       end = props.end,
       dataKey = props.dataKey,
-      sizeKey = props.sizeKey,
+      horizontal = props.horizontal,
       dragging = props.dragging,
-      chosenKey = props.chosenKey,
       children = props.children,
       onSizeChange = props.onSizeChange;
-    return list.slice(start, end + 1).map(function (item, i) {
-      var index = start + i;
-      var key = getDataKey(item, dataKey);
-      return /*#__PURE__*/React__namespace.createElement(Item$1, {
-        key: key,
-        dataKey: key,
-        sizeKey: sizeKey,
-        dragging: dragging,
-        chosenKey: chosenKey,
-        onSizeChange: onSizeChange
-      }, typeof children === 'function' ? children(item, index, key) : children);
-    });
+    return React__namespace.useMemo(function () {
+      return list.slice(start, end + 1).map(function (item, i) {
+        var index = start + i;
+        var key = getDataKey(item, dataKey);
+        return /*#__PURE__*/React__namespace.createElement(Item$1, {
+          key: key,
+          dataKey: key,
+          dragging: dragging,
+          horizontal: horizontal,
+          onSizeChange: onSizeChange
+        }, typeof children === 'function' ? children(item, index, key) : children);
+      });
+    }, [list, start, end, dataKey, horizontal, dragging, children]);
   }
 
   function useCombine(states, effect) {
     React__namespace.useEffect(effect, Object.values(states));
   }
 
-  var Emits = {
-    drag: 'onDrag',
-    drop: 'onDrop',
-    top: 'onTop',
-    bottom: 'onBottom'
-  };
+  var draggingItem;
   function VirtualList(props, ref) {
     var _props$dataKey = props.dataKey,
       dataKey = _props$dataKey === void 0 ? '' : _props$dataKey,
@@ -1675,12 +1669,14 @@
       chosenClass = _props$chosenClass === void 0 ? '' : _props$chosenClass,
       _props$placeholderCla = props.placeholderClass,
       placeholderClass = _props$placeholderCla === void 0 ? '' : _props$placeholderCla,
-      _props$fallbackOnBody = props.fallbackOnBody,
-      fallbackOnBody = _props$fallbackOnBody === void 0 ? false : _props$fallbackOnBody,
+      _props$appendToBody = props.appendToBody,
+      appendToBody = _props$appendToBody === void 0 ? false : _props$appendToBody,
       _props$scrollThreshol = props.scrollThreshold,
       scrollThreshold = _props$scrollThreshol === void 0 ? 55 : _props$scrollThreshol,
       _props$delayOnTouchOn = props.delayOnTouchOnly,
-      delayOnTouchOnly = _props$delayOnTouchOn === void 0 ? false : _props$delayOnTouchOn;
+      delayOnTouchOnly = _props$delayOnTouchOn === void 0 ? false : _props$delayOnTouchOn,
+      _props$dropOnAnimatio = props.dropOnAnimationEnd,
+      dropOnAnimationEnd = _props$dropOnAnimatio === void 0 ? true : _props$dropOnAnimatio;
     var _React$useState = React__namespace.useState({
         start: 0,
         end: keeps - 1,
@@ -1690,57 +1686,52 @@
       _React$useState2 = _slicedToArray(_React$useState, 2),
       range = _React$useState2[0],
       setRange = _React$useState2[1];
-    var dragging = React__namespace.useRef(false);
-    var chosenKey = React__namespace.useRef('');
-    var uniqueKeys = React__namespace.useRef([]);
-    var rootRef = React__namespace.useRef();
-    var wrapRef = React__namespace.useRef();
+    var dragging = React__namespace.useRef('');
+    var rootElRef = React__namespace.useRef();
+    var wrapElRef = React__namespace.useRef();
     /**
      * git item size by data-key
      */
     var getSize = function getSize(key) {
-      return virtualRef.current.getSize(key);
+      return VS.current.call('getSize', key);
     };
     /**
      * Get the current scroll height
      */
     var getOffset = function getOffset() {
-      return virtualRef.current.getOffset();
+      return VS.current.call('getOffset');
     };
     /**
      * Get client viewport size
      */
     var getClientSize = function getClientSize() {
-      return virtualRef.current.getClientSize();
+      return VS.current.call('getClientSize');
     };
     /**
      * Get all scroll size
      */
     var getScrollSize = function getScrollSize() {
-      return virtualRef.current.getScrollSize();
+      return VS.current.call('getScrollSize');
     };
     /**
      * Scroll to the specified offset
      */
     var scrollToOffset = function scrollToOffset(offset) {
-      var _a;
-      (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset(offset);
+      VS.current.call('scrollToOffset', offset);
     };
     /**
      * Scroll to the specified index position
      */
-    var scrollToIndex = function scrollToIndex(index) {
-      var _a;
-      (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
+    var scrollToIndex = function scrollToIndex(index, align) {
+      VS.current.call('scrollToIndex', index, align);
     };
     /**
      * Scroll to the specified data-key position
      */
-    var scrollToKey = function scrollToKey(key) {
-      var _a;
+    var scrollToKey = function scrollToKey(key, align) {
       var index = uniqueKeys.current.indexOf(key);
       if (index > -1) {
-        (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
+        VS.current.call('scrollToIndex', index, align);
       }
     };
     /**
@@ -1753,8 +1744,7 @@
      * Scroll to bottom of list
      */
     var scrollToBottom = function scrollToBottom() {
-      var _a;
-      (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom();
+      VS.current.call('scrollToBottom');
     };
     React__namespace.useImperativeHandle(ref, function () {
       return {
@@ -1769,85 +1759,68 @@
         scrollToBottom: scrollToBottom
       };
     });
+    // ========================================== data source ==========================================
+    var list = React__namespace.useRef([]);
+    var uniqueKeys = React__namespace.useRef([]);
+    var lastListLength = React__namespace.useRef(0);
+    var listLengthWhenTopLoading = React__namespace.useRef(0);
+    React__namespace.useEffect(function () {
+      var _a;
+      list.current = dataSource;
+      updateUniqueKeys();
+      detectRangeChange(lastListLength.current, dataSource.length);
+      // if auto scroll to the last offset
+      if (listLengthWhenTopLoading.current && props.keepOffset) {
+        var index = dataSource.length - listLengthWhenTopLoading.current;
+        if (index > 0) {
+          (_a = VS.current) === null || _a === void 0 ? void 0 : _a.call('scrollToIndex', index);
+        }
+        listLengthWhenTopLoading.current = 0;
+      }
+      lastListLength.current = dataSource.length;
+    }, [dataSource]);
     React__namespace.useEffect(function () {
-      installVirtual();
-      installSortable();
+      initVirtualSortable();
       return function () {
-        var _a, _b;
-        (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.removeScrollEventListener();
-        (_b = sortableRef.current) === null || _b === void 0 ? void 0 : _b.destroy();
+        VS.current.destroy();
       };
     }, []);
-    // ========================================== use virtual ==========================================
-    var topLoading = React__namespace.useRef(false);
-    var virtualRef = React__namespace.useRef();
-    var virtualCombinedStates = {
-      size: size,
-      keeps: keeps,
-      scroller: scroller,
-      direction: direction,
-      debounceTime: debounceTime,
-      throttleTime: throttleTime
-    };
-    var handleToTop = debounce(function () {
-      var _a;
-      topLoading.current = true;
-      (_a = props[Emits.top]) === null || _a === void 0 ? void 0 : _a.call(props);
-    }, 50);
-    var handleToBottom = debounce(function () {
+    var updateUniqueKeys = function updateUniqueKeys() {
       var _a;
-      (_a = props[Emits.bottom]) === null || _a === void 0 ? void 0 : _a.call(props);
-    }, 50);
-    var onScroll = function onScroll(event) {
-      topLoading.current = false;
-      if (event.top) {
-        handleToTop();
-      } else if (event.bottom) {
-        handleToBottom();
-      }
-    };
-    var onUpdate = function onUpdate(range) {
-      setRange(function (current) {
-        if (sortableRef.current && dragging.current && range.start !== current.start) {
-          sortableRef.current.rangeChanged = true;
-        }
-        return range;
+      uniqueKeys.current = list.current.map(function (item) {
+        return getDataKey(item, dataKey);
       });
+      (_a = VS.current) === null || _a === void 0 ? void 0 : _a.option('uniqueKeys', uniqueKeys.current);
     };
-    var installVirtual = function installVirtual() {
-      virtualRef.current = new Virtual(Object.assign(Object.assign({}, virtualCombinedStates), {
-        buffer: Math.round(keeps / 3),
-        wrapper: wrapRef.current,
-        scroller: scroller || rootRef.current,
-        uniqueKeys: uniqueKeys.current,
-        onScroll: onScroll,
-        onUpdate: onUpdate
-      }));
+    var detectRangeChange = function detectRangeChange(oldListLength, newListLength) {
+      var _a, _b;
+      if (oldListLength === newListLength) {
+        return;
+      }
+      var newRange = Object.assign({}, range);
+      if (oldListLength > keeps && newListLength > oldListLength && newRange.end === oldListLength - 1 && ((_a = VS.current) === null || _a === void 0 ? void 0 : _a.call('isReachedBottom'))) {
+        newRange.start++;
+      }
+      (_b = VS.current) === null || _b === void 0 ? void 0 : _b.call('updateRange', newRange);
     };
-    useCombine(virtualCombinedStates, function () {
-      VirtualAttrs.forEach(function (key) {
-        var _a;
-        if (props[key] !== undefined) {
-          (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.option(key, props[key]);
-        }
-      });
-    });
-    var lastLength = React__namespace.useRef(0);
-    React__namespace.useEffect(function () {
-      var _a;
-      // if auto scroll to the last offset
-      if (lastLength.current && topLoading.current && props.keepOffset) {
-        var index = Math.abs(dataSource.length - lastLength.current);
-        if (index > 0) {
-          (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
-        }
-        topLoading.current = false;
+    var dispatchEvent = function dispatchEvent(name) {
+      var handler = props[name];
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
       }
-      lastLength.current = dataSource.length;
-    }, [dataSource]);
-    // ========================================== use dnd ==========================================
-    var sortableRef = React__namespace.useRef();
-    var sortableCombinedStates = {
+      handler && handler.apply(null, args);
+    };
+    // ========================================== virtual sortable ==========================================
+    var VS = React__namespace.useRef();
+    var combinedAttrs = {
+      // virtual attrs
+      size: size,
+      keeps: keeps,
+      scroller: scroller,
+      direction: direction,
+      debounceTime: debounceTime,
+      throttleTime: throttleTime,
+      // sortable attrs
       delay: delay,
       group: group,
       handle: handle,
@@ -1861,142 +1834,139 @@
       ghostStyle: ghostStyle,
       chosenClass: chosenClass,
       scrollSpeed: scrollSpeed,
-      fallbackOnBody: fallbackOnBody,
+      appendToBody: appendToBody,
       scrollThreshold: scrollThreshold,
       delayOnTouchOnly: delayOnTouchOnly,
-      placeholderClass: placeholderClass
-    };
-    var onChoose = function onChoose(event) {
-      chosenKey.current = event.node.getAttribute('data-key');
+      placeholderClass: placeholderClass,
+      dropOnAnimationEnd: dropOnAnimationEnd
     };
-    var onUnchoose = function onUnchoose() {
-      chosenKey.current = '';
-    };
-    var onDrag = function onDrag(event) {
-      var _a, _b, _c;
-      dragging.current = true;
-      if (!sortable) {
-        (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.enableScroll(false);
-        (_b = sortableRef.current) === null || _b === void 0 ? void 0 : _b.option('autoScroll', false);
-      }
-      (_c = props[Emits.drag]) === null || _c === void 0 ? void 0 : _c.call(props, event);
-    };
-    var onDrop = function onDrop(event) {
-      var _a, _b, _c;
-      dragging.current = false;
-      (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.enableScroll(true);
-      (_b = sortableRef.current) === null || _b === void 0 ? void 0 : _b.option('autoScroll', props.autoScroll);
-      var params = Object.assign(Object.assign({}, event), {
-        list: _toConsumableArray(event.list)
-      });
-      (_c = props[Emits.drop]) === null || _c === void 0 ? void 0 : _c.call(props, params);
-    };
-    var installSortable = function installSortable() {
-      sortableRef.current = new Sortable(rootRef.current, Object.assign(Object.assign({}, sortableCombinedStates), {
-        list: dataSource,
+    var initVirtualSortable = function initVirtualSortable() {
+      VS.current = new VirtualSortable(rootElRef.current, Object.assign(Object.assign({}, combinedAttrs), {
+        buffer: Math.round(keeps / 3),
+        wrapper: wrapElRef.current,
+        scroller: scroller || rootElRef.current,
         uniqueKeys: uniqueKeys.current,
+        ghostContainer: wrapElRef.current,
         onDrag: onDrag,
         onDrop: onDrop,
-        onChoose: onChoose,
-        onUnchoose: onUnchoose
+        onScroll: onScroll,
+        onUpdate: onUpdate
       }));
     };
-    useCombine(sortableCombinedStates, function () {
-      SortableAttrs.forEach(function (key) {
-        var _a;
-        if (props[key] !== undefined) {
-          (_a = sortableRef.current) === null || _a === void 0 ? void 0 : _a.option(key, props[key]);
+    useCombine(combinedAttrs, function () {
+      if (!VS.current) return;
+      Object.keys(combinedAttrs).forEach(function (key) {
+        if (props[key] !== void 0) {
+          VS.current.option(key, props[key]);
         }
       });
     });
-    // ========================================== layout ==========================================
-    var list = React__namespace.useRef([]);
-    React__namespace.useEffect(function () {
-      var _a;
-      updateUniqueKeys();
-      updateRange(list.current, dataSource);
-      list.current = dataSource;
-      (_a = sortableRef.current) === null || _a === void 0 ? void 0 : _a.option('list', dataSource);
-    }, [dataSource]);
-    var updateUniqueKeys = function updateUniqueKeys() {
-      var _a, _b;
-      uniqueKeys.current = dataSource.map(function (item) {
-        return getDataKey(item, dataKey);
-      });
-      (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.option('uniqueKeys', uniqueKeys.current);
-      (_b = sortableRef.current) === null || _b === void 0 ? void 0 : _b.option('uniqueKeys', uniqueKeys.current);
-    };
-    var updateRange = function updateRange(oldList, newList) {
-      var _a;
-      if (!oldList.length && !newList.length) {
-        return;
-      }
-      if (oldList.length === newList.length) {
-        return;
-      }
-      var newRange = Object.assign({}, range);
-      if (oldList.length > keeps && newList.length > oldList.length && newRange.end === oldList.length - 1 && scrolledToBottom()) {
-        newRange.start++;
+    var handleToTop = debounce(function () {
+      listLengthWhenTopLoading.current = list.current.length;
+      dispatchEvent('onTop');
+    }, 50);
+    var handleToBottom = debounce(function () {
+      dispatchEvent('onBottom');
+    }, 50);
+    var onScroll = function onScroll(event) {
+      listLengthWhenTopLoading.current = 0;
+      if (event.top) {
+        handleToTop();
+      } else if (event.bottom) {
+        handleToBottom();
       }
-      (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.updateRange(newRange);
     };
-    var scrolledToBottom = function scrolledToBottom() {
-      var offset = getOffset();
-      var clientSize = getClientSize();
-      var scrollSize = getScrollSize();
-      return offset + clientSize + 1 >= scrollSize;
+    var onUpdate = function onUpdate(range, changed) {
+      setRange(range);
+      changed && dispatchEvent('onRangeChange', range);
     };
     var onSizeChange = function onSizeChange(key, size) {
-      var _a, _b;
       // ignore changes for dragging element
-      if (isSameValue(key, chosenKey.current)) {
+      if (isEqual(key, dragging.current) || !VS.current) {
         return;
       }
-      var sizes = (_a = virtualRef.current) === null || _a === void 0 ? void 0 : _a.sizes.size;
-      (_b = virtualRef.current) === null || _b === void 0 ? void 0 : _b.onItemResized(key, size);
-      if (sizes === keeps - 1 && dataSource.length > keeps) {
-        virtualRef.current.updateRange(Object.assign({}, range));
+      var sizes = VS.current.virtual.sizes.size;
+      VS.current.call('updateItemSize', key, size);
+      if (sizes === keeps - 1 && list.current.length > keeps) {
+        VS.current.call('updateRange', range);
       }
     };
+    var onDrag = function onDrag(event) {
+      var _a, _b;
+      var key = event.key,
+        index = event.index;
+      var item = list.current[index];
+      dragging.current = key;
+      draggingItem = item;
+      if (!sortable) {
+        (_a = VS.current) === null || _a === void 0 ? void 0 : _a.call('enableScroll', false);
+        (_b = VS.current) === null || _b === void 0 ? void 0 : _b.option('autoScroll', false);
+      }
+      dispatchEvent('onDrag', Object.assign(Object.assign({}, event), {
+        item: item
+      }));
+    };
+    var onDrop = function onDrop(event) {
+      var item = draggingItem;
+      var oldIndex = event.oldIndex,
+        newIndex = event.newIndex;
+      var oldList = _toConsumableArray(list.current);
+      var newList = _toConsumableArray(list.current);
+      if (oldIndex === -1) {
+        newList.splice(newIndex, 0, item);
+      } else if (newIndex === -1) {
+        newList.splice(oldIndex, 1);
+      } else {
+        newList.splice(oldIndex, 1);
+        newList.splice(newIndex, 0, item);
+      }
+      VS.current.call('enableScroll', true);
+      VS.current.option('autoScroll', props.autoScroll);
+      dragging.current = '';
+      dispatchEvent('onDrop', Object.assign(Object.assign({}, event), {
+        item: item,
+        list: newList,
+        oldList: oldList
+      }));
+    };
+    // ========================================== layout ==========================================
     var _React$useMemo = React__namespace.useMemo(function () {
         var front = range.front,
           behind = range.behind;
-        var isHorizontal = direction !== 'vertical';
-        var overflowStyle = isHorizontal ? 'auto hidden' : 'hidden auto';
+        var isHorizontal = direction === 'horizontal';
+        var overflow = isHorizontal ? 'auto hidden' : 'hidden auto';
         var padding = isHorizontal ? "0px ".concat(behind, "px 0px ").concat(front, "px") : "".concat(front, "px 0px ").concat(behind, "px");
-        var containerStyle = Object.assign(Object.assign({}, style), {
-          overflow: tableMode || scroller ? '' : overflowStyle
+        var rootElStyle = Object.assign(Object.assign({}, style), {
+          overflow: tableMode || scroller ? '' : overflow
         });
-        var wrapperStyle = Object.assign(Object.assign({}, wrapStyle), {
+        var wrapElStyle = Object.assign(Object.assign({}, wrapStyle), {
           padding: tableMode ? '' : padding
         });
-        var itemSizeKey = isHorizontal ? 'offsetWidth' : 'offsetHeight';
         return {
-          containerStyle: containerStyle,
-          wrapperStyle: wrapperStyle,
-          itemSizeKey: itemSizeKey
+          rootElStyle: rootElStyle,
+          wrapElStyle: wrapElStyle
         };
       }, [range, style, wrapStyle, scroller, tableMode, direction]),
-      containerStyle = _React$useMemo.containerStyle,
-      wrapperStyle = _React$useMemo.wrapperStyle,
-      itemSizeKey = _React$useMemo.itemSizeKey;
+      rootElStyle = _React$useMemo.rootElStyle,
+      wrapElStyle = _React$useMemo.wrapElStyle;
     var _React$useMemo2 = React__namespace.useMemo(function () {
-        var container = tableMode ? 'table' : wrapTag;
-        var wrapper = tableMode ? 'tbody' : wrapTag;
-        return [container, wrapper];
+        var rootElTag = tableMode ? 'table' : wrapTag;
+        var wrapElTag = tableMode ? 'tbody' : wrapTag;
+        return {
+          rootElTag: rootElTag,
+          wrapElTag: wrapElTag
+        };
       }, [rootTag, wrapTag, tableMode]),
-      _React$useMemo3 = _slicedToArray(_React$useMemo2, 2),
-      containerTag = _React$useMemo3[0],
-      wrapperTage = _React$useMemo3[1];
+      rootElTag = _React$useMemo2.rootElTag,
+      wrapElTag = _React$useMemo2.wrapElTag;
     var listChildren = useChildren({
       list: dataSource,
       start: range.start,
       end: range.end,
       dataKey: dataKey,
-      sizeKey: itemSizeKey,
       children: props.children,
       dragging: dragging.current,
-      chosenKey: chosenKey.current,
+      horizontal: direction === 'horizontal',
       onSizeChange: onSizeChange
     });
     var TableSpacer = function TableSpacer(offset, key) {
@@ -2011,16 +1981,15 @@
         style: style
       }));
     };
-    return /*#__PURE__*/React__namespace.createElement(containerTag, {
-      ref: rootRef,
-      style: containerStyle,
+    return /*#__PURE__*/React__namespace.createElement(rootElTag, {
+      ref: rootElRef,
+      style: rootElStyle,
       className: className
-    }, [props.header, /*#__PURE__*/React__namespace.createElement(wrapperTage, {
-      ref: wrapRef,
-      key: 'virtual-table-wrap',
-      style: wrapperStyle,
+    }, [props.header, /*#__PURE__*/React__namespace.createElement(wrapElTag, {
+      ref: wrapElRef,
+      style: wrapElStyle,
       className: wrapClass
-    }, [tableMode && TableSpacer(range.front, 'virtual-table-front')].concat(_toConsumableArray(listChildren), [tableMode && TableSpacer(range.behind, 'virtual-table-behind')])), props.footer]);
+    }, [tableMode && TableSpacer(range.front, 'front')].concat(_toConsumableArray(listChildren), [tableMode && TableSpacer(range.behind, 'behind')])), props.footer]);
   }
   var index = /*#__PURE__*/React__namespace.forwardRef(VirtualList);