@os-design/drag-sort 1.0.1 → 1.0.2

package/dist/cjs/utils/useMoveNode.js

@@ -24,24 +24,28 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /* eslint-disable no-constant-condition */
-var useMoveNode = function useMoveNode(position, draggedNode, getNodeStyle) {
-  return (0, _react.useCallback)(function (props) {
-    var list = props.list,
-        startNode = props.startNode,
-        type = props.type,
-        _props$untilTheEnd = props.untilTheEnd,
-        untilTheEnd = _props$untilTheEnd === void 0 ? false : _props$untilTheEnd,
-        _props$insideAnotherL = props.insideAnotherList,
-        insideAnotherList = _props$insideAnotherL === void 0 ? false : _props$insideAnotherL;
+var useMoveNode = function useMoveNode(props) {
+  var position = props.position,
+      draggedNode = props.draggedNode,
+      getNodeStyle = props.getNodeStyle;
+  return (0, _react.useCallback)(function (options) {
+    var list = options.list,
+        startNode = options.startNode,
+        direction = options.direction,
+        destination = options.destination,
+        _options$isAnotherLis = options.isAnotherList,
+        isAnotherList = _options$isAnotherLis === void 0 ? false : _options$isAnotherLis;
     if (!draggedNode || !position) return startNode;
 
     var _draggedNode$node = _slicedToArray(draggedNode.node, 5),
         draggedNodeIndex = _draggedNode$node[4];
 
     var axis = list.horizontal ? 'x' : 'y';
+    var startRectProp = list.horizontal ? 'left' : 'top';
+    var endRectProp = list.horizontal ? 'right' : 'bottom';
     var node = startNode;
 
-    if (type === 'up') {
+    if (direction === 'up') {
       while (true) {
         var _node = node,
             _node2 = _slicedToArray(_node, 5),
@@ -56,13 +60,15 @@ var useMoveNode = function useMoveNode(position, draggedNode, getNodeStyle) {
             prevNodeSetStyle = _prev[3],
             prevNodeIndex = _prev[4];
 
-        if (!untilTheEnd) {
+        if (destination === 'cursor') {
           var prevNodeRect = (0, _getNodeRect["default"])(prevNodeRef);
-          var rectProp = list.horizontal ? 'right' : 'bottom';
-          if (prevNodeRect && position[axis] > prevNodeRect[rectProp]) return node;
+
+          if (prevNodeRect && position[axis] > prevNodeRect[endRectProp]) {
+            return node;
+          }
         }
 
-        if (insideAnotherList || prevNodeIndex < draggedNodeIndex) {
+        if (isAnotherList || prevNodeIndex < draggedNodeIndex) {
           prevNodeSetStyle(getNodeStyle('down', list.horizontal));
         } else if (nodeIndex > draggedNodeIndex) {
           nodeSetStyle(getNodeStyle('init', list.horizontal));
@@ -85,15 +91,15 @@ var useMoveNode = function useMoveNode(position, draggedNode, getNodeStyle) {
             nextNodeSetStyle = _next[3],
             nextNodeIndex = _next[4];
 
-        if (!untilTheEnd) {
+        if (destination === 'cursor') {
           var nextNodeRect = (0, _getNodeRect["default"])(nextNodeRef);
 
-          var _rectProp = list.horizontal ? 'left' : 'top';
-
-          if (nextNodeRect && position[axis] < nextNodeRect[_rectProp]) return node;
+          if (nextNodeRect && position[axis] < nextNodeRect[startRectProp]) {
+            return node;
+          }
         }
 
-        if (insideAnotherList || _nodeIndex < draggedNodeIndex) {
+        if (isAnotherList || _nodeIndex < draggedNodeIndex) {
           _nodeSetStyle(getNodeStyle('init', list.horizontal));
         } else if (nextNodeIndex > draggedNodeIndex) {
           nextNodeSetStyle(getNodeStyle('up', list.horizontal));

package/dist/cjs/utils/useMoveNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useMoveNode.ts"],"names":["useMoveNode","position","draggedNode","getNodeStyle","props","list","startNode","type","untilTheEnd","insideAnotherList","node","draggedNodeIndex","axis","horizontal","prev","nodeSetStyle","nodeIndex","prevNodeRef","prevNodeSetStyle","prevNodeIndex","prevNodeRect","rectProp","next","nextNodeRef","nextNodeSetStyle","nextNodeIndex","nextNodeRect"],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\n// eslint-disable-next-line import/no-cycle\nimport { DraggedNode } from './useDragEffect';\nimport getNodeRect from './getNodeRect';\nimport { NodeStyleGetter } from './useGetNodeStyle';\n\ninterface MoveProps {\n  list: NodeList;\n  startNode: ExistingNode;\n  type: 'up' | 'down';\n  untilTheEnd?: boolean;\n  insideAnotherList?: boolean;\n}\n\n/* eslint-disable no-constant-condition */\n\nconst useMoveNode = (\n  position: Position | null,\n  draggedNode: DraggedNode | null,\n  getNodeStyle: NodeStyleGetter\n) =>\n  useCallback(\n    (props: MoveProps) => {\n      const {\n        list,\n        startNode,\n        type,\n        untilTheEnd = false,\n        insideAnotherList = false,\n      } = props;\n\n      if (!draggedNode || !position) return startNode;\n      const [, , , , draggedNodeIndex] = draggedNode.node;\n      const axis = list.horizontal ? 'x' : 'y';\n      let node = startNode;\n\n      if (type === 'up') {\n        while (true) {\n          const [prev, , , nodeSetStyle, nodeIndex] = node;\n          if (!prev) return node;\n          const [, , prevNodeRef, prevNodeSetStyle, prevNodeIndex] = prev;\n          if (!untilTheEnd) {\n            const prevNodeRect = getNodeRect(prevNodeRef);\n            const rectProp = list.horizontal ? 'right' : 'bottom';\n            if (prevNodeRect && position[axis] > prevNodeRect[rectProp])\n              return node;\n          }\n          if (insideAnotherList || prevNodeIndex < draggedNodeIndex) {\n            prevNodeSetStyle(getNodeStyle('down', list.horizontal));\n          } else if (nodeIndex > draggedNodeIndex) {\n            nodeSetStyle(getNodeStyle('init', list.horizontal));\n          }\n          node = prev;\n        }\n      } else {\n        while (true) {\n          const [, next, , nodeSetStyle, nodeIndex] = node;\n          if (!next) return node;\n          const [, , nextNodeRef, nextNodeSetStyle, nextNodeIndex] = next;\n          if (!untilTheEnd) {\n            const nextNodeRect = getNodeRect(nextNodeRef);\n            const rectProp = list.horizontal ? 'left' : 'top';\n            if (nextNodeRect && position[axis] < nextNodeRect[rectProp])\n              return node;\n          }\n          if (insideAnotherList || nodeIndex < draggedNodeIndex) {\n            nodeSetStyle(getNodeStyle('init', list.horizontal));\n          } else if (nextNodeIndex > draggedNodeIndex) {\n            nextNodeSetStyle(getNodeStyle('up', list.horizontal));\n          }\n          node = next;\n        }\n      }\n    },\n    [draggedNode, getNodeStyle, position]\n  );\n\nexport default useMoveNode;\n"],"file":"useMoveNode.js"}
+{"version":3,"sources":["../../../src/utils/useMoveNode.ts"],"names":["useMoveNode","props","position","draggedNode","getNodeStyle","options","list","startNode","direction","destination","isAnotherList","node","draggedNodeIndex","axis","horizontal","startRectProp","endRectProp","prev","nodeSetStyle","nodeIndex","prevNodeRef","prevNodeSetStyle","prevNodeIndex","prevNodeRect","next","nextNodeRef","nextNodeSetStyle","nextNodeIndex","nextNodeRect"],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\nimport getNodeRect from './getNodeRect';\nimport { NodeStyleGetter } from './useGetNodeStyle';\n\ninterface DraggedNode {\n  node: ExistingNode;\n}\n\ninterface UseMoveNodeProps {\n  position: Position | null;\n  draggedNode: DraggedNode | null;\n  getNodeStyle: NodeStyleGetter;\n}\n\ninterface MoveProps {\n  list: NodeList;\n  startNode: ExistingNode;\n  direction: 'up' | 'down';\n  destination: 'cursor' | 'end';\n  isAnotherList?: boolean;\n}\n\n/* eslint-disable no-constant-condition */\n\nconst useMoveNode = (props: UseMoveNodeProps) => {\n  const { position, draggedNode, getNodeStyle } = props;\n\n  return useCallback(\n    (options: MoveProps) => {\n      const {\n        list,\n        startNode,\n        direction,\n        destination,\n        isAnotherList = false,\n      } = options;\n\n      if (!draggedNode || !position) return startNode;\n      const [, , , , draggedNodeIndex] = draggedNode.node;\n      const axis = list.horizontal ? 'x' : 'y';\n      const startRectProp = list.horizontal ? 'left' : 'top';\n      const endRectProp = list.horizontal ? 'right' : 'bottom';\n      let node = startNode;\n\n      if (direction === 'up') {\n        while (true) {\n          const [prev, , , nodeSetStyle, nodeIndex] = node;\n          if (!prev) return node;\n\n          const [, , prevNodeRef, prevNodeSetStyle, prevNodeIndex] = prev;\n\n          if (destination === 'cursor') {\n            const prevNodeRect = getNodeRect(prevNodeRef);\n            if (prevNodeRect && position[axis] > prevNodeRect[endRectProp]) {\n              return node;\n            }\n          }\n\n          if (isAnotherList || prevNodeIndex < draggedNodeIndex) {\n            prevNodeSetStyle(getNodeStyle('down', list.horizontal));\n          } else if (nodeIndex > draggedNodeIndex) {\n            nodeSetStyle(getNodeStyle('init', list.horizontal));\n          }\n\n          node = prev;\n        }\n      } else {\n        while (true) {\n          const [, next, , nodeSetStyle, nodeIndex] = node;\n          if (!next) return node;\n\n          const [, , nextNodeRef, nextNodeSetStyle, nextNodeIndex] = next;\n\n          if (destination === 'cursor') {\n            const nextNodeRect = getNodeRect(nextNodeRef);\n            if (nextNodeRect && position[axis] < nextNodeRect[startRectProp]) {\n              return node;\n            }\n          }\n\n          if (isAnotherList || nodeIndex < draggedNodeIndex) {\n            nodeSetStyle(getNodeStyle('init', list.horizontal));\n          } else if (nextNodeIndex > draggedNodeIndex) {\n            nextNodeSetStyle(getNodeStyle('up', list.horizontal));\n          }\n\n          node = next;\n        }\n      }\n    },\n    [draggedNode, getNodeStyle, position]\n  );\n};\n\nexport default useMoveNode;\n"],"file":"useMoveNode.js"}

package/dist/esm/utils/useBlankNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useBlankNode.ts"],"names":["useCallback","useEffect","useRef","useBlankNode","props","draggedNode","targetList","initDraggedNodeRect","initDraggedNodeRectRef","blankNode","current","ref","list","initWidth","initHeight","div","document","createElement","style","width","height","minWidth","minHeight","parent","innerList","innerRef","getBoundingClientRect","position","left","horizontal","top","appendChild","tail","getTail","node","add","setStyle","index","removeBlankNode","blank","remove","blankNodeRef","parentElement","removeChild"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport NodeList, { ExistingNode } from './NodeList';\n// eslint-disable-next-line import/no-cycle\nimport { DraggedNode } from './useDragEffect';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\n}\n\ninterface UseBlankNodeProps {\n  draggedNode: DraggedNode | null;\n  targetList: NodeList | null;\n  initDraggedNodeRect: InitSize | null;\n}\n\ninterface BlankNode {\n  list: NodeList;\n  node: ExistingNode;\n}\n\n/**\n * Appends the blank node to the list to increase the height of it.\n * Used when the dragged node is located inside another list.\n */\nconst useBlankNode = (props: UseBlankNodeProps) => {\n  const { draggedNode, targetList, initDraggedNodeRect } = props;\n  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);\n  const blankNode = useRef<BlankNode | null>(null);\n\n  useEffect(() => {\n    initDraggedNodeRectRef.current = initDraggedNodeRect;\n  }, [initDraggedNodeRect]);\n\n  useEffect(() => {\n    if (\n      !draggedNode ||\n      !targetList ||\n      !targetList.ref.current ||\n      draggedNode.list === targetList ||\n      !initDraggedNodeRectRef.current\n    ) {\n      return;\n    }\n\n    // Create a new blank div\n    const { initWidth, initHeight } = initDraggedNodeRectRef.current;\n    const div = document.createElement('div');\n    div.style.width = `${initWidth}px`;\n    div.style.height = `${initHeight}px`;\n    div.style.minWidth = `${initWidth}px`;\n    div.style.minHeight = `${initHeight}px`;\n\n    let parent = targetList.ref.current;\n    const innerList = targetList.innerRef.current;\n\n    // The inner ref used only in the virtual list\n    if (innerList) {\n      const { width, height } = innerList.getBoundingClientRect();\n      div.style.position = 'absolute';\n      div.style.left = targetList.horizontal ? `${width}px` : '0px';\n      div.style.top = targetList.horizontal ? '0px' : `${height}px`;\n      parent = innerList;\n    }\n\n    // Append the blank div to increase the height of the list\n    parent.appendChild(div);\n\n    // Add the blank node to the node list\n    const tail = targetList.getTail();\n    blankNode.current = {\n      list: targetList,\n      node: targetList.add({\n        ref: { current: div },\n        setStyle: () => {},\n        index: tail ? tail[4] + 1 : 0,\n      }),\n    };\n  }, [draggedNode, targetList]);\n\n  const removeBlankNode = useCallback(() => {\n    const blank = blankNode.current;\n    if (!blank) return;\n    blankNode.current = null;\n    blank.list.remove(blank.node);\n    const [, , blankNodeRef] = blank.node;\n    if (!blank.list.ref.current || !blankNodeRef.current) return;\n    const parent = blankNodeRef.current.parentElement;\n    if (parent) parent.removeChild(blankNodeRef.current);\n  }, []);\n\n  // Remove the blank node if the dragged node has been dropped\n  useEffect(() => {\n    if (!draggedNode) return () => {};\n    return () => removeBlankNode();\n  }, [draggedNode, removeBlankNode]);\n\n  return removeBlankNode;\n};\n\nexport default useBlankNode;\n"],"file":"useBlankNode.js"}
+{"version":3,"sources":["../../../src/utils/useBlankNode.ts"],"names":["useCallback","useEffect","useRef","useBlankNode","props","draggedNode","targetList","initDraggedNodeRect","initDraggedNodeRectRef","blankNode","current","ref","list","initWidth","initHeight","div","document","createElement","style","width","height","minWidth","minHeight","parent","innerList","innerRef","getBoundingClientRect","position","left","horizontal","top","appendChild","tail","getTail","node","add","setStyle","index","removeBlankNode","blank","remove","blankNodeRef","parentElement","removeChild"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport NodeList, { ExistingNode } from './NodeList';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\n}\n\ninterface DraggedNode {\n  list: NodeList;\n}\n\ninterface UseBlankNodeProps {\n  draggedNode: DraggedNode | null;\n  targetList: NodeList | null;\n  initDraggedNodeRect: InitSize | null;\n}\n\ninterface BlankNode {\n  list: NodeList;\n  node: ExistingNode;\n}\n\n/**\n * Appends the blank node to the list to increase the height of it.\n * Used when the dragged node is located inside another list.\n */\nconst useBlankNode = (props: UseBlankNodeProps) => {\n  const { draggedNode, targetList, initDraggedNodeRect } = props;\n  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);\n  const blankNode = useRef<BlankNode | null>(null);\n\n  useEffect(() => {\n    initDraggedNodeRectRef.current = initDraggedNodeRect;\n  }, [initDraggedNodeRect]);\n\n  useEffect(() => {\n    if (\n      !draggedNode ||\n      !targetList ||\n      !targetList.ref.current ||\n      draggedNode.list === targetList ||\n      !initDraggedNodeRectRef.current\n    ) {\n      return;\n    }\n\n    // Create a new blank div\n    const { initWidth, initHeight } = initDraggedNodeRectRef.current;\n    const div = document.createElement('div');\n    div.style.width = `${initWidth}px`;\n    div.style.height = `${initHeight}px`;\n    div.style.minWidth = `${initWidth}px`;\n    div.style.minHeight = `${initHeight}px`;\n\n    let parent = targetList.ref.current;\n    const innerList = targetList.innerRef.current;\n\n    // The inner ref used only in the virtual list\n    if (innerList) {\n      const { width, height } = innerList.getBoundingClientRect();\n      div.style.position = 'absolute';\n      div.style.left = targetList.horizontal ? `${width}px` : '0px';\n      div.style.top = targetList.horizontal ? '0px' : `${height}px`;\n      parent = innerList;\n    }\n\n    // Append the blank div to increase the height of the list\n    parent.appendChild(div);\n\n    // Add the blank node to the node list\n    const tail = targetList.getTail();\n    blankNode.current = {\n      list: targetList,\n      node: targetList.add({\n        ref: { current: div },\n        setStyle: () => {},\n        index: tail ? tail[4] + 1 : 0,\n      }),\n    };\n  }, [draggedNode, targetList]);\n\n  const removeBlankNode = useCallback(() => {\n    const blank = blankNode.current;\n    if (!blank) return;\n    blankNode.current = null;\n    blank.list.remove(blank.node);\n    const [, , blankNodeRef] = blank.node;\n    if (!blank.list.ref.current || !blankNodeRef.current) return;\n    const parent = blankNodeRef.current.parentElement;\n    if (parent) parent.removeChild(blankNodeRef.current);\n  }, []);\n\n  // Remove the blank node if the dragged node has been dropped\n  useEffect(() => {\n    if (!draggedNode) return () => {};\n    return () => removeBlankNode();\n  }, [draggedNode, removeBlankNode]);\n\n  return removeBlankNode;\n};\n\nexport default useBlankNode;\n"],"file":"useBlankNode.js"}

package/dist/esm/utils/useDragEffect.js

@@ -5,11 +5,9 @@ import getElementScroll from './getElementScroll';
 import useTargetList from './useTargetList';
 import useInitRect from './useInitRect';
 import useInitScrollOffset from './useInitScrollOffset';
-import useGetNodeStyle from './useGetNodeStyle'; // eslint-disable-next-line import/no-cycle
-
+import useGetNodeStyle from './useGetNodeStyle';
 import useMoveNode from './useMoveNode';
-import getNodeRect from './getNodeRect'; // eslint-disable-next-line import/no-cycle
-
+import getNodeRect from './getNodeRect';
 import useBlankNode from './useBlankNode';
 const HIDDEN_NODE_STYLE = {
   opacity: 0,
@@ -22,7 +20,7 @@ const createEmptyNode = ({
 }) => [prev, next, {
   current: null
 }, () => {}, -1];
-/* eslint-disable @typescript-eslint/no-explicit-any,no-constant-condition */
+/* eslint-disable no-constant-condition */
 
 
 const useDragEffect = props => {
@@ -44,8 +42,7 @@ const useDragEffect = props => {
   // We can't read the bounds of the dragged node on the fly because the node can be unmounted in the virtual list.
 
   const initDraggedNodeRect = useInitRect(draggedNode ? draggedNode.node[2] : undefined); // The initial scroll position of the list where the dragged node is located.
-  // Used to detect the actual position of the dragged node.
-  // The purpose is the same as with initDraggedNodeRect.
+  // Used to detect the actual position of the dragged node. The purpose is the same as with initDraggedNodeRect.
 
   const initDraggedNodeListScrollOffset = useInitScrollOffset(draggedNode ? draggedNode.list.ref : undefined); // The central position of the dragged node
 
@@ -63,12 +60,17 @@ const useDragEffect = props => {
       x: x - draggedNode.position.x + initWidth / 2,
       y: y - draggedNode.position.y + initHeight / 2
     };
-  }, [cursorPosition, draggedNode, initDraggedNodeRect]); // Returns the style for moving the node in the specified direction
+  }, [cursorPosition, draggedNode, initDraggedNodeRect]); // The list in which the cursor is located
 
-  const getNodeStyle = useGetNodeStyle(initDraggedNodeRect); // The list in which the cursor is located
+  const targetList = useTargetList(position, listStoreRef); // Returns the style for moving the node in the specified direction
 
-  const targetList = useTargetList(position, listStoreRef);
-  const moveNode = useMoveNode(position, draggedNode, getNodeStyle);
+  const getNodeStyle = useGetNodeStyle(initDraggedNodeRect); // Moves the node up or down
+
+  const moveNode = useMoveNode({
+    position,
+    draggedNode,
+    getNodeStyle
+  });
   const setTargetNode = useCallback((list, node) => {
     const [,,,, nodeIndex] = node;
     targetNodeRef.current = {
@@ -130,14 +132,14 @@ const useDragEffect = props => {
   const updateTargetNode = useCallback(() => {
     if (!draggedNode) return;
     const prevTargetNode = targetNodeRef.current; // The last updated node
-    // Dragging outside the list
+    // Dragging outside the origin list
 
     if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList !== draggedNode.list) {
       moveNode({
         list: prevTargetNode.list,
         startNode: prevTargetNode.node,
-        type: 'down',
-        untilTheEnd: true
+        direction: 'down',
+        destination: 'end'
       });
       clearTargetNode();
     } // Dragging outside another list
@@ -147,13 +149,13 @@ const useDragEffect = props => {
       moveNode({
         list: prevTargetNode.list,
         startNode: prevTargetNode.node,
-        type: 'down',
-        untilTheEnd: true,
-        insideAnotherList: true
+        direction: 'down',
+        destination: 'end',
+        isAnotherList: true
       });
       removeBlankNode();
       clearTargetNode();
-    } // Dragging inside the list
+    } // Dragging inside the origin list
 
 
     if (!prevTargetNode && targetList === draggedNode.list) {
@@ -162,7 +164,8 @@ const useDragEffect = props => {
       const node = moveNode({
         list: targetList,
         startNode: tail,
-        type: 'up'
+        direction: 'up',
+        destination: 'cursor'
       });
       setTargetNode(targetList, node);
       return;
@@ -175,12 +178,13 @@ const useDragEffect = props => {
       const node = moveNode({
         list: targetList,
         startNode: tail,
-        type: 'up',
-        insideAnotherList: true
+        direction: 'up',
+        destination: 'cursor',
+        isAnotherList: true
       });
       setTargetNode(targetList, node);
       return;
-    } // Dragging in the same list
+    } // Dragging in the origin list
 
 
     if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList === draggedNode.list) {
@@ -204,7 +208,8 @@ const useDragEffect = props => {
             startNode: createEmptyNode({
               prev: tail
             }),
-            type: 'up'
+            direction: 'up',
+            destination: 'cursor'
           });
           setTargetNode(targetList, node);
         } else {
@@ -215,7 +220,8 @@ const useDragEffect = props => {
             startNode: createEmptyNode({
               next: head
             }),
-            type: 'down'
+            direction: 'down',
+            destination: 'cursor'
           });
           setTargetNode(targetList, node);
         }
@@ -224,17 +230,19 @@ const useDragEffect = props => {
       }
 
       const prevTargetNodeRect = getNodeRect(prevTargetNode.node[2]);
-      const rectProp = targetList.horizontal ? 'left' : 'top';
+      const startRectProp = targetList.horizontal ? 'left' : 'top';
       if (!position || !prevTargetNodeRect) return;
-      const isMoveUp = position[axis] < prevTargetNodeRect[rectProp];
+      const isMoveUp = position[axis] < prevTargetNodeRect[startRectProp];
       const node = isMoveUp ? moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'up'
+        direction: 'up',
+        destination: 'cursor'
       }) : moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'down'
+        direction: 'down',
+        destination: 'cursor'
       });
       setTargetNode(targetList, node);
       return;
@@ -244,19 +252,21 @@ const useDragEffect = props => {
     if (targetList && targetList !== draggedNode.list && prevTargetNode && prevTargetNode.list === targetList) {
       const axis = targetList.horizontal ? 'x' : 'y';
       const prevTargetNodeRect = getNodeRect(prevTargetNode.node[2]);
-      const rectProp = targetList.horizontal ? 'left' : 'top';
+      const startRectProp = targetList.horizontal ? 'left' : 'top';
       if (!position || !prevTargetNodeRect) return;
-      const isMoveUp = position[axis] < prevTargetNodeRect[rectProp];
+      const isMoveUp = position[axis] < prevTargetNodeRect[startRectProp];
       const node = isMoveUp ? moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'up',
-        insideAnotherList: true
+        direction: 'up',
+        destination: 'cursor',
+        isAnotherList: true
       }) : moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'down',
-        insideAnotherList: true
+        direction: 'down',
+        destination: 'cursor',
+        isAnotherList: true
       });
       setTargetNode(targetList, node);
     }
@@ -268,77 +278,81 @@ const useDragEffect = props => {
 
   const [throttledUpdateTargetNode] = useThrottle(updateTargetNode, 100);
   useEvent(targetList ? targetList.ref : undefined, 'scroll', throttledUpdateTargetNode);
-  useEvent(window, 'scroll', throttledUpdateTargetNode); // Reset styles of the nodes when the dragged node was dropped
+  useEvent(window, 'scroll', throttledUpdateTargetNode); // Reset styles of the affected nodes when the dragged node was dropped
 
   useEffect(() => {
     if (!draggedNode) return () => {};
     const [,,,, draggedNodeIndex] = draggedNode.node;
     return () => {
-      const targetNode = targetNodeRef.current; // If the dragged node was inside another list, reset the styles for the nodes,
-      // starting at the tail and ending with the dragged node.
-
-      if (targetNode && targetNode.list !== draggedNode.list) {
-        const tail = targetNode.list.getTail();
-        if (!tail) return;
-        let node = tail;
-
-        while (true) {
-          const [prev,,, nodeSetStyle, nodeIndex] = node;
-          nodeSetStyle({});
-          if (!prev || nodeIndex <= draggedNodeIndex) break;
-          node = prev;
-        }
-      } // If the dragged node was outside the origin list, reset the styles for the nodes,
-      // starting at the tail and ending with the dragged node.
-
+      const targetNode = targetNodeRef.current; // If the dragged node was outside the origin list, reset the styles for the nodes,
+      // starting at the tail and ending with the dragged node in the origin list.
 
-      const tail = draggedNode.list.getTail();
+      if (!targetNode || targetNode.list !== draggedNode.list) {
+        const tail = draggedNode.list.getTail();
 
-      if ((!targetNode || targetNode.list !== draggedNode.list) && tail) {
-        let node = tail;
+        if (tail) {
+          let node = tail;
 
-        while (true) {
-          const [prev,,, nodeSetStyle, nodeIndex] = node;
-          nodeSetStyle({});
-          if (!prev || nodeIndex <= draggedNodeIndex) break;
-          node = prev;
+          while (true) {
+            const [prev,,, nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= draggedNodeIndex) break;
+            node = prev;
+          }
         }
-      }
+      } // If the dragged node was inside another list, reset the styles for the nodes,
+      // starting at the tail and ending with the dragged node in the target list.
 
-      if (!targetNode) return;
-      const [,,, targetNodeSetStyle, targetNodeIndex] = targetNode.node;
-
-      if (targetNodeIndex > draggedNodeIndex) {
-        let {
-          node
-        } = targetNode;
-
-        while (true) {
-          const [prev,,, nodeSetStyle, nodeIndex] = node;
-          nodeSetStyle({});
-          if (!prev || nodeIndex < draggedNodeIndex) return;
-          node = prev;
-        }
-      }
 
-      if (targetNodeIndex < draggedNodeIndex) {
-        let {
-          node
-        } = targetNode;
+      if (targetNode && targetNode.list !== draggedNode.list) {
+        const tail = targetNode.list.getTail();
+        const [,,,, targetNodeIndex] = targetNode.node;
 
-        while (true) {
-          const [, next,, nodeSetStyle, nodeIndex] = node;
-          nodeSetStyle({});
-          if (!next || nodeIndex > draggedNodeIndex) return;
-          node = next;
-        }
-      }
+        if (tail) {
+          let node = tail;
 
-      if (targetNodeIndex === draggedNodeIndex) {
-        targetNodeSetStyle({});
+          while (true) {
+            const [prev,,, nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= targetNodeIndex) break;
+            node = prev;
+          }
+        }
+      } // If the dragged node was moved inside the origin list, reset the styles for the nodes,
+      // starting with target node and ending with the dragged node.
+
+
+      if (targetNode && targetNode.list === draggedNode.list) {
+        const [,,, targetNodeSetStyle, targetNodeIndex] = targetNode.node;
+
+        if (targetNodeIndex > draggedNodeIndex) {
+          let {
+            node
+          } = targetNode;
+
+          while (true) {
+            const [prev,,, nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= draggedNodeIndex) break;
+            node = prev;
+          }
+        } else if (targetNodeIndex < draggedNodeIndex) {
+          let {
+            node
+          } = targetNode;
+
+          while (true) {
+            const [, next,, nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!next || nodeIndex >= draggedNodeIndex) break;
+            node = next;
+          }
+        } else if (targetNodeIndex === draggedNodeIndex) {
+          targetNodeSetStyle({});
+        }
       }
     };
-  }, [draggedNode]); // Update the position of the mounted nodes between the dragged and target nodes (used in virtual list)
+  }, [draggedNode]); // Update the position of the newly mounted nodes in the origin list (used in the virtual list)
 
   useEffect(() => {
     if (!draggedNode) return () => {};
@@ -349,32 +363,33 @@ const useDragEffect = props => {
         setStyle,
         index
       } = nodeProps;
-      const targetNode = targetNodeRef.current; // If the dragged node outside the origin list
-
-      if ((!targetNodeRef.current || targetNodeRef.current.list !== draggedNode.list) && index > draggedNodeIndex) {
-        setStyle(getNodeStyle('up', draggedNode.list.horizontal));
-        return;
-      }
-
-      if (!targetNode || !targetNode.node) return;
-      const [,,,, targetNodeIndex] = targetNode.node; // If the dragged node was mounted
+      const targetNode = targetNodeRef.current; // Set the hidden style, if the mounted node is the dragged node
 
       if (index === draggedNodeIndex) {
         setStyle(HIDDEN_NODE_STYLE);
         return;
-      } // If the node between the dragged and target nodes was mounted
+      } // If the dragged node is inside the origin list
+
 
+      if (targetNode && targetNode.list === draggedNode.list) {
+        // Move the mounted node up/down, if it is located between the dragged and target node
+        const [,,,, targetNodeIndex] = targetNode.node;
 
-      if (index > draggedNodeIndex && index < targetNodeIndex) {
-        setStyle(getNodeStyle('up', targetNode.list.horizontal));
-      } else if (index < draggedNodeIndex && index > targetNodeIndex) {
-        setStyle(getNodeStyle('down', targetNode.list.horizontal));
+        if (index > draggedNodeIndex && index < targetNodeIndex) {
+          setStyle(getNodeStyle('up', targetNode.list.horizontal));
+        } else if (index < draggedNodeIndex && index > targetNodeIndex) {
+          setStyle(getNodeStyle('down', targetNode.list.horizontal));
+        }
+      } else if (index > draggedNodeIndex) {
+        // Otherwise, move the mounted node up, if it is located below the dragged node
+        setStyle(getNodeStyle('up', draggedNode.list.horizontal));
       }
     };
 
     draggedNode.list.addListener(update);
     return () => draggedNode.list.removeListener(update);
-  }, [draggedNode, getNodeStyle]);
+  }, [draggedNode, getNodeStyle]); // Update the position of the newly mounted nodes in the target list (used in the virtual list)
+
   useEffect(() => {
     if (!draggedNode || !targetList || targetList === draggedNode.list) {
       return () => {};
@@ -388,8 +403,11 @@ const useDragEffect = props => {
       const targetNode = targetNodeRef.current;
       if (!targetNode) return;
       const [,,,, targetNodeIndex] = targetNode.node;
-      if (index < targetNodeIndex) return;
-      setStyle(getNodeStyle('down', targetList.horizontal));
+
+      if (index >= targetNodeIndex) {
+        // Move the mounted node down, if it is located below the target node or if it is the target node
+        setStyle(getNodeStyle('down', targetList.horizontal));
+      }
     };
 
     targetList.addListener(update);