react-native-drag-sort-list 1.0.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,282 @@
+
+![1](https://github.com/user-attachments/assets/622e6699-875f-4441-a067-9554e47091cc)
+
+# react-native-drag-sort
+
+一个功能强大的 React Native 拖拽排序组件库，支持单列和多列布局，提供流畅的拖拽体验和自动滚动功能。
+
+## 功能特性
+
+- ✅ **长按拖拽**：长按 500ms 后开始拖拽，提供视觉反馈（缩放效果）
+- ✅ **单列/多列布局**：支持自定义列数，灵活布局
+- ✅ **自动滚动**：拖拽到边缘时自动触发外层 ScrollView 滚动
+- ✅ **流畅动画**：使用 Animated API 实现平滑的位置切换动画
+- ✅ **ScrollView 联动**：支持与外层 ScrollView 无缝集成
+- ✅ **自定义间距**：支持设置行间距和列间距
+- ✅ **性能优化**：使用 memo 和 lodash 进行性能优化
+
+## 安装
+
+### 前置依赖
+
+本组件依赖 `react-native-gesture-handler` `lodash`，请先安装：
+
+```bash
+npm install react-native-gesture-handler
+npm install lodash
+# 或
+yarn add react-native-gesture-handler
+yarn add lodash
+```
+
+### iOS 安装
+
+```bash
+cd ios && pod install && cd ..
+```
+
+### 使用组件
+
+```bash
+# 将组件文件复制到你的项目中，或通过 npm link 等方式引入
+```
+
+## 使用方法
+
+### 基础用法（单列）
+
+```javascript
+import React from 'react';
+import { Dimensions, View, Text } from 'react-native';
+import DragSortView from './lib/DragSortView';
+
+const windowWidth = Dimensions.get('window').width;
+
+const MyComponent = () => {
+  const [data, setData] = React.useState(['1', '2', '3', '4', '5']);
+
+  const renderItem = (item, index) => {
+    return (
+      <View style={{
+        width: windowWidth,
+        height: 50,
+        backgroundColor: 'red',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+        <Text>{item}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <DragSortView
+      column={1}
+      childrenWidth={windowWidth}
+      childrenHeight={50}
+      renderItem={renderItem}
+      rowSpace={10}
+      dataSource={data}
+      onDragEnd={(from, to, newData) => {
+        console.log('从位置', from, '移动到位置', to);
+        setData(newData);
+      }}
+    />
+  );
+};
+```
+
+### 多列布局
+
+```javascript
+import React from 'react';
+import { Dimensions, View, Text } from 'react-native';
+import DragSortView from './lib/DragSortView';
+
+const windowWidth = Dimensions.get('window').width;
+
+const MyComponent = () => {
+  const [data, setData] = React.useState(['1', '2', '3', '4', '5', '6']);
+
+  const renderItem = (item, index) => {
+    return (
+      <View style={{
+        width: (windowWidth - 10) / 2,
+        height: 50,
+        backgroundColor: 'blue',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+        <Text>{item}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <DragSortView
+      column={2}
+      childrenWidth={(windowWidth - 10) / 2}
+      childrenHeight={50}
+      renderItem={renderItem}
+      rowSpace={10}
+      columnSpace={10}
+      dataSource={data}
+      onDragEnd={(from, to, newData) => {
+        setData(newData);
+      }}
+    />
+  );
+};
+```
+
+### 与 ScrollView 集成
+
+在 ScrollView 中使用时，需要提供三个 ref 来支持自动滚动功能。你可以在同一个 ScrollView 中放置多个 DragSortView：
+
+```javascript
+import React, { useRef } from 'react';
+import { Dimensions, ScrollView, Text, View } from 'react-native';
+import DragSortView from './lib/DragSortView';
+
+const windowWidth = Dimensions.get('window').width;
+
+const MyComponent = () => {
+  const scrollViewRef = useRef(null); // 最外层 scrollView
+  const scrollYRef = useRef(0); // 已经滚动的距离
+  const scrollViewHeightRef = useRef(0); // 页面展示视图大小
+
+  const renderOneItem = (item, index) => {
+    return (
+      <View style={{
+        width: windowWidth,
+        height: 50,
+        backgroundColor: 'red',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+        <Text>{item}</Text>
+      </View>
+    );
+  };
+
+  const renderTwoItem = (item, index) => {
+    return (
+      <View style={{
+        width: (windowWidth - 10) / 2,
+        height: 50,
+        backgroundColor: 'blue',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+        <Text>{item}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View
+      onLayout={(e) => {
+        scrollViewHeightRef.current = e.nativeEvent.layout.height;
+      }}
+    >
+      <ScrollView
+        bounces={false}
+        scrollEventThrottle={16}
+        ref={scrollViewRef}
+        onScroll={(e) => {
+          scrollYRef.current = e.nativeEvent.contentOffset.y;
+        }}
+      >
+        {/* 单列拖拽列表 */}
+        <DragSortView
+          scrollYRef={scrollYRef}
+          scrollViewRef={scrollViewRef}
+          scrollViewHeightRef={scrollViewHeightRef}
+          column={1}
+          childrenWidth={windowWidth}
+          childrenHeight={50}
+          renderItem={renderOneItem}
+          rowSpace={10}
+          dataSource={['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']}
+        />
+        
+        {/* 多列拖拽列表 */}
+        <DragSortView
+          scrollYRef={scrollYRef}
+          scrollViewRef={scrollViewRef}
+          scrollViewHeightRef={scrollViewHeightRef}
+          column={2}
+          childrenWidth={(windowWidth - 10) / 2}
+          childrenHeight={50}
+          renderItem={renderTwoItem}
+          rowSpace={10}
+          columnSpace={10}
+          dataSource={['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']}
+        />
+      </ScrollView>
+    </View>
+  );
+};
+```
+
+## API 文档
+
+### DragSortView Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `dataSource` | `Array` | ✅ | - | 数据源数组 |
+| `renderItem` | `Function(item, index)` | ✅ | - | 渲染每个列表项的函数 |
+| `childrenWidth` | `Number` | ✅ | - | 子元素宽度 |
+| `childrenHeight` | `Number` | ✅ | - | 子元素高度 |
+| `column` | `Number` | ❌ | `1` | 列数 |
+| `rowSpace` | `Number` | ❌ | `0` | 行间距 |
+| `columnSpace` | `Number` | ❌ | `0` | 列间距 |
+| `keyStr` | `String` | ❌ | - | 作为列表 key 的关键字（用于优化渲染） |
+| `onDragStart` | `Function()` | ❌ | - | 拖拽开始回调 |
+| `onDragEnd` | `Function(from, to, newData)` | ❌ | - | 拖拽结束回调，参数：原始索引、新索引、新数据数组 |
+| `parentYRef` | `Ref<Number>` | ❌ | - | 如果当前拖拽视图在一个容器中，则需要这个容器在 scrollView 的 y 位置 |
+| `scrollYRef` | `Ref<Number>` | ❌ | - | 外层 ScrollView 滚动距离的 ref |
+| `scrollViewRef` | `Ref<ScrollView>` | ❌ | - | 外层 ScrollView 的 ref |
+| `scrollViewHeightRef` | `Ref<Number>` | ❌ | - | 外层 ScrollView 视图高度的 ref |
+| `triggerTop` | `Number` | ❌ | `200` | 距离页面顶部多少距离触发自动向上滚动 |
+| `triggerBottom` | `Number` | ❌ | `屏幕高度 - 200` | 距离页面顶部多少距离触发自动向下滚动 |
+
+### onDragEnd 回调参数
+
+- `from` (Number): 拖拽元素的原始索引位置
+- `to` (Number): 拖拽元素的新索引位置
+- `newData` (Array): 重新排序后的新数据数组
+
+## 注意事项
+
+1. **手势库依赖**：确保已正确安装和配置 `react-native-gesture-handler`，并在应用入口处导入：
+   ```javascript
+   import 'react-native-gesture-handler';
+   ```
+
+2. **ScrollView 集成**：如果需要在 ScrollView 中使用，必须提供 `scrollYRef`、`scrollViewRef` 和 `scrollViewHeightRef` 三个 ref，否则自动滚动功能将无法正常工作。
+
+3. **性能优化**：组件内部使用 `memo` 进行优化，但建议为 `dataSource` 中的每个对象提供唯一的 `keyStr` 属性以进一步提升性能。
+
+4. **平台差异**：
+   - iOS 和 Android 的滚动速度和距离有细微差异（iOS: 10ms/2px, Android: 20ms/5px）
+   - 可通过修改 `DragSortView.js` 中的 `TIME` 和 `DISTANCE` 常量进行调整
+
+5. **长按时间**：默认长按 500ms 后开始拖拽，可通过修改 `DragItemContainer.js` 中的 `minDuration` 和 `activateAfterLongPress` 进行调整。
+
+## 示例项目
+
+项目包含两个测试文件，展示了不同的使用场景：
+
+- `TestDragSort.js`：基础单列拖拽示例
+- `TestMoreDragSort.js`：ScrollView 集成和多列布局示例
+
+## 许可证
+
+ISC
+
+## 作者
+
+liushun
+

package/index.js

@@ -0,0 +1,10 @@
+/**
+ * @file index.js
+ * @description Main entry point for react-native-drag-sort
+ * @author liushun
+ */
+
+import DragSortView from "./lib/DragSortView";
+
+export default DragSortView;
+export { DragSortView };

package/lib/DragItemContainer.js

@@ -0,0 +1,70 @@
+/**
+ * @file DragItemContainer.js
+ * @description 
+ * @author liushun
+ * @created 2025/12/24 14:28
+ * @lastModified 2025/12/24 14:28
+ */
+
+
+
+import React, {useRef} from "react";
+import { Animated, Dimensions, Easing, StyleSheet, View } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+
+
+const DragItemContainer = (props) => {
+	
+	const {x, y,  childrenHeight, childrenWidth, onDragStart, onDragMove, onDragEnd} = props;
+	const [zIndex, setZIndex] = React.useState(0);
+	
+	const itemScaleAnime = useRef(new Animated.Value(1)).current;
+	
+	const isDragging = useRef(false);
+	
+	//长按手势处理
+	const longPress = Gesture.LongPress().onStart((e)=>{
+		itemScaleAnime.setValue(1.1)
+		setZIndex(1000);
+		onDragStart?.(e);
+		isDragging.current = true;
+	}).minDuration(500).enabled(true);
+	
+	//处理滑动和抬起手势
+	const pan = Gesture.Pan().onUpdate((e) => {
+		if(isDragging.current){
+			onDragMove?.(e);
+		}
+	}).onTouchesUp((e)=>{ //停止拖拽
+		isDragging.current = false;
+		itemScaleAnime.setValue(1)
+		setZIndex(0);
+		onDragEnd?.(e);
+	}).activateAfterLongPress(505).enabled(true);
+	
+	//手势合并
+	const composed = Gesture.Simultaneous(longPress, pan);
+	
+	
+	return (
+		<GestureDetector gesture={composed}>
+			<Animated.View style={[
+				styles.container,
+				{zIndex},
+				{top: y, left: x},
+				{width: childrenWidth, height: childrenHeight},
+				{transform: [{ scale: itemScaleAnime }],}
+			]}>
+				{props.children}
+			</Animated.View>
+		</GestureDetector>
+	)
+}
+
+export default DragItemContainer;
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+	}
+})

package/lib/DragSortView.js

@@ -0,0 +1,351 @@
+/**
+ * @file DragSortView.js
+ * @description
+ * @author liushun
+ * @created 2025/12/24 14:29
+ * @lastModified 2025/12/24 14:29
+ */
+
+
+import React, {useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, memo} from 'react'
+import { Animated, Dimensions, Easing, StyleSheet, View, Platform } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import DragItemContainer from "./DragItemContainer";
+import _ from "lodash";
+
+const TOP = 200; //上边距
+const BOTTOM = Dimensions.get('screen').height - 200; //下边距
+
+const TIME = Platform.OS === 'ios'?10:25; //每次滚动的时间间隔
+const DISTANCE = Platform.OS === 'ios'?2:4; //每次滚动的距离
+
+const MemoDragSortableView = (props, ref) => {
+	
+	const {
+		keyStr, //作为列表key 的关键字
+		dataSource, //数组数据
+		childrenWidth, //子元素宽度
+		childrenHeight, //子元素高度
+		rowSpace = 0, //行间距
+		columnSpace = 0, //列间距
+		column = 1, //有几列
+		onDragEnd, //拖拽结束
+		onDragStart, //拖拽开始
+		parentYRef, //如果当前拖拽视图在一个容器中，则需要这个容器在 scrollView 的 y 位置
+		scrollYRef, //外层 scrollView 滚动的距离
+		scrollViewRef, //外层 scrollView 的索引
+		scrollViewHeightRef, //外层 scrollView 视图高度
+		triggerTop = TOP, // 距离页面顶部小于多少距离触发外层滚动
+		triggerBottom = BOTTOM, //距离页面顶部大于多少距离触发外层滚动
+	} = props;
+	
+	const [dragSourceData, setDragSourceData] = React.useState([]);
+	const [totalHeight, setTotalHeight] = React.useState(0);
+	
+	const scrollTimeRef = useRef(null); //外层 scrollView 自动滚动定时
+	const yRef = useRef(null);
+	const heightRef = useRef(null);
+	
+	//表示当前在拖拽的元素在原始数据的索引位置,特别注释元素在原始数据的索引是不变的，变的是元素对象中的索引值
+	const dragCurrentRef = useRef(null);
+	
+	//拖拽元素上次拖拽的位置
+	const lastDragY = useRef(0);
+	
+	const lastScrollYRef = useRef(0);
+	
+	//先构造拖拽所需数据, 由于改变位置是动画，所以不 setState 就可以改变位置
+	useEffect(()=>{
+		
+		let arr = [];
+		dataSource?.forEach((item, index)=>{
+			const top = getTopByIndex(index);
+			const left = getLeftByIndex(index);
+			let obj = {
+				x: new Animated.Value(left), //拖拽中的坐标
+				y: new Animated.Value(top),
+				changeIndex: index, //拖拽变化后的位置索引
+				originIndex: index, //拖拽前的位置索引
+				yValue: top, //这个值用来外部改变拖拽元素的位置
+				value: item,
+			}
+			arr.push(obj);
+		})
+		setTotalHeight(getChildRealHeight()*Math.ceil(dataSource?.length/column));
+		setDragSourceData(arr);
+	},[dataSource, column])
+	
+	const getChildRealHeight = () => {
+		return (rowSpace + childrenHeight)
+	}
+	
+	//根据索引获取顶部距离
+	const getTopByIndex = (index) => {
+		return Math.floor(index / column) * getChildRealHeight();
+	}
+	
+	const getChildRealWidth = () => {
+		return (columnSpace + childrenWidth)
+	}
+	
+	//根据索引获取左边距离
+	const getLeftByIndex = (index) => {
+		return index%column * getChildRealWidth();
+	}
+	
+	const clearScrollInterval = () => {
+		scrollTimeRef.current&&clearInterval(scrollTimeRef.current);
+		scrollTimeRef.current = null;
+	}
+	
+	const startScroll = (distance) => {
+		if(!scrollTimeRef.current){
+			clearScrollInterval();
+			scrollTimeRef.current = setInterval(() => {
+				//判断是否应该滚动，还是停止滚动
+				if(Math.floor(scrollYRef?.current) <= Math.ceil(yRef.current + (parentYRef?parentYRef?.current:0)) && distance < 0){
+					stopScroll();
+					return;
+				}
+				
+				if(Math.ceil(scrollYRef?.current) >= Math.floor((yRef.current +  (parentYRef?parentYRef?.current:0) + heightRef.current) - scrollViewHeightRef?.current) && distance > 0){
+					stopScroll();
+					return;
+				}
+				
+				scrollViewRef?.current.scrollTo({
+					y: scrollYRef?.current + distance,
+					animated: false,
+				})
+				setDragOffSet(scrollYRef?.current - lastScrollYRef.current);
+				lastScrollYRef.current = scrollYRef?.current;
+			},TIME)
+		}
+	}
+	
+	const setDragOffSet = (distance) => {
+		const dragItem = dragSourceData[dragCurrentRef.current];
+		dragItem.yValue+=distance;
+		dragItem.y.setValue(dragItem.yValue)
+	}
+	
+	const stopScroll = () => {
+		clearScrollInterval();
+	}
+	
+	const isOutScrollView = () => {
+		return scrollViewRef?.current && scrollViewHeightRef?.current && scrollYRef?.current >= 0;
+	}
+	
+	const onTopReached = () => {
+		//判断外层是否是滚动视图
+		if(isOutScrollView()){
+			startScroll(-DISTANCE)
+		}
+	}
+	
+	const onBottomReached = () => {
+		if(isOutScrollView()){
+			startScroll(DISTANCE)
+		}
+	}
+	
+	const onCentered = () => {
+		if(isOutScrollView()){
+			stopScroll();
+		}
+	}
+	
+	const dragStart = (index, e) => {
+		lastScrollYRef.current = scrollYRef?.current; //这里先赋值下
+		dragCurrentRef.current = index;
+		lastDragY.current = e.absoluteY;
+		onDragStart?.();
+	}
+	
+	
+	//改变策略，通过两次 absoluteY 的值来获取每次移动距离
+	const dragMove = (index, e) => {
+		
+		if(e.absoluteY < triggerTop){
+			onTopReached?.();
+		}else if(e.absoluteY > triggerBottom){
+			onBottomReached?.();
+		}else {
+			onCentered?.();
+		}
+		
+		let dragData = dragSourceData[index];
+		let moveY = (e.absoluteY - lastDragY.current)+dragData.yValue;
+		let moveX = getLeftByIndex(dragData.originIndex);
+		lastDragY.current = e.absoluteY;
+		if(column > 1){
+			moveX = e.translationX+getLeftByIndex(dragData.originIndex);
+		}
+		
+		dragData.y.setValue(moveY);
+		dragData.x.setValue(moveX);
+		dragData.yValue = moveY;
+		let dragIndex = dragData.changeIndex;
+		
+		//注意 targetIndex 不是拖拽索引，是在总数据的索引
+		const targetIndex = dragSourceData.findIndex((item, i) => {
+			if(i === index){
+				return false;
+			}
+			const itemIndex = item.originIndex;
+			const minY = getTopByIndex(itemIndex) ;
+			const maxY = getTopByIndex(itemIndex) + getChildRealHeight();
+			const minX = getLeftByIndex(itemIndex) ;
+			const maxX = getLeftByIndex(itemIndex) + getChildRealWidth();
+			
+			const x = moveX + childrenWidth/2;
+			const y = moveY + childrenHeight/2;
+			if( x >= minX && x <= maxX && y >= minY && y <= maxY ){
+				return true;
+			}
+		});
+		
+		const targetItem = dragSourceData[targetIndex];
+		
+		if(targetItem){  //多行拖拽交换要特殊处理下
+			
+			//这里不能直接改当前拖拽的元素到被拖拽索引
+			const targetOriginIndex = targetItem.originIndex;
+			//判断是后移动还是前移动
+			if(dragIndex < targetItem.originIndex){  //往后移动
+				for(let i = dragIndex+1; i <= targetItem.originIndex; i++){
+					const item = dragSourceData.find(item => item.originIndex === i && item.changeIndex === i);
+					if(item){
+						item.changeIndex -=  1 ;
+						item.originIndex -= 1;
+						// item.y.setValue(getTopByIndex(item.changeIndex));
+						// item.x.setValue(getLeftByIndex(item.changeIndex));
+						item.yValue = getTopByIndex(item.changeIndex);
+						Animated.parallel([
+							Animated.timing(item.x, {
+								toValue: getLeftByIndex(item.changeIndex),
+								duration: 300,
+								easing: Easing.ease,
+								useNativeDriver: false,
+							}),
+							Animated.timing(item.y, {
+								toValue: getTopByIndex(item.changeIndex),
+								duration: 300,
+								easing: Easing.ease,
+								useNativeDriver: false,
+							}),
+						]).start();
+					}
+				}
+			}else{
+				for(let i = dragIndex -1; i >= targetItem.originIndex; i--){
+					const item = dragSourceData.find(item => item.originIndex === i && item.changeIndex === i);
+					
+					if(item){
+						
+						item.changeIndex += 1 ;
+						item.originIndex += 1;
+						// item.y.setValue(getTopByIndex(item.changeIndex));
+						// item.x.setValue(getLeftByIndex(item.changeIndex));
+						item.yValue = getTopByIndex(item.changeIndex);
+						Animated.parallel([
+							Animated.timing(item.x, {
+								toValue: getLeftByIndex(item.changeIndex),
+								duration: 300,
+								easing: Easing.ease,
+								useNativeDriver: false,
+							}),
+							Animated.timing(item.y, {
+								toValue: getTopByIndex(item.changeIndex),
+								duration: 300,
+								easing: Easing.ease,
+								useNativeDriver: false,
+							}),
+						]).start();
+					}
+				}
+			}
+			dragData.changeIndex = targetOriginIndex;
+		}
+		
+		
+	}
+	
+	const dragEnd = (index, e) => {
+		
+		stopScroll();
+		let dragData = dragSourceData[index];
+		//计算索引变化，将变化后数据吐出去
+		let arr = [];
+		dragSourceData?.forEach((item) => {
+			arr[item.changeIndex] = item.value;
+		})
+		onDragEnd?.(dragData.originIndex, dragData.changeIndex, arr);
+		
+		dragData.originIndex = dragData.changeIndex;
+		dragData.x.setValue(getLeftByIndex(dragData.originIndex));
+		dragData.y.setValue(getTopByIndex(dragData.originIndex));
+		dragData.yValue = getTopByIndex(dragData.originIndex);
+		
+	}
+	
+	const renderItem = (item, index) => {
+		return (
+			<DragItemContainer
+				key={keyStr?item?.value?.[keyStr]:index}
+				x={item?.x}
+				y={item?.y}
+				childrenWidth={childrenWidth}
+				childrenHeight={childrenHeight}
+				onDragStart={(e)=>{
+					dragStart(index, e);
+				}}
+				onDragMove={(e)=>{
+					dragMove(index, e);
+				}}
+				onDragEnd={(e)=>{
+					dragEnd(index, e);
+				}}
+			>
+				{props?.renderItem?.(item.value, index)}
+			</DragItemContainer>
+		)
+	}
+	
+	const renderList = () => {
+		return(
+			<View style={{height: totalHeight}}>
+				{
+					dragSourceData?.map((item, index) => {
+						return  renderItem(item, index);
+					})
+				}
+			</View>
+		)
+	}
+	
+	return(
+		<View onLayout={(e)=>{
+			yRef.current = e.nativeEvent.layout.y;
+			heightRef.current = e.nativeEvent.layout.height;
+		}}>
+			<GestureHandlerRootView>
+				{renderList()}
+			</GestureHandlerRootView>
+		</View>
+	
+	)
+}
+
+const DragSortableView = memo(MemoDragSortableView, (prevProps, nextProps)=>{
+	prevProps = _.omitBy(prevProps, _.isFunction);
+	nextProps = _.omitBy(nextProps, _.isFunction);
+	return _.isEqual(prevProps, nextProps);
+});
+
+export default DragSortableView
+
+const styles = StyleSheet.create({
+
+})

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-native-drag-sort-list",
+  "version": "1.0.0",
+  "description": "A powerful React Native drag and sort component library with support for single and multi-column layouts",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "drag",
+    "sort",
+    "drag-sort",
+    "drag-and-drop",
+    "reorder",
+    "list",
+    "grid",
+    "gesture"
+  ],
+  "author": "liushun",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/react-native-drag-sort.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/react-native-drag-sort/issues"
+  },
+  "homepage": "https://github.com/your-username/react-native-drag-sort#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-gesture-handler": ">=2.0.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}