mochixuan/react-native-drag-sort

有需求, 大分类嵌套小分类.大小分类都能拖动. 大分类拖动互换位置, 小分类内拖动互换位置. 与sectionList嵌套能实现吗?

Closed this issue · 7 comments

如题

大分类和大分类相互拖动、同一个大分类里小分类相互拖动 应该可以。但是不同大分类内里的小分类拖动不行

@mochixuan 这样就行.我试试. AnySizeDragSortableView 有没有和 SectionList的滚动冲突的解决方案? 我看了demo, 只写了DragSortableView的样例.

里面是有滚动适配的,你可以看下里面的代码

我看了滚动适配的demo, 是和ScrollView嵌套的. 我用AnySizeDragSortableView里嵌套DragSortableView来实现. 但AnySizeDragSortableView 这个组件没有对外暴露 是否控制它滚动的props.

貌似解决了. 改了源码.😂

表情解决了。改了源。😂

是否可以放出改了哪里 参考下 有个需求和你差不多

AnySizeDragSortableView 中修改源码, 如果是小分类拖动,就让大分类的scrollEnabled为false.

render() {
    const {selectedItem, selectedPosition, scrollEnabled} = this.state
    const {dataSource, keyExtractor, renderItem, movedWrapStyle, scrollEnabled: scroll} = this.props
    const scrollState = scroll === false ? scroll : scrollEnabled
    return (
      <View style={styles.box}>
        {
          selectedPosition && (
            <View style={[movedWrapStyle, { left: selectedPosition.left, top: selectedPosition.top, position: 'absolute', zIndex: 999 }]}>
              {renderItem(selectedItem, null, true)}
            </View>
          )
        }
        <ScrollView
          bounces={false}
          scrollEventThrottle={1}
          scrollIndicatorInsets={this.props.scrollIndicatorInsets}
          ref={(scrollRef)=> {
              if (this.props.onScrollRef) this.props.onScrollRef(scrollRef)
              this.scrollRef = scrollRef
              return this.scrollRef
          }}
          scrollEnabled = {scrollState}
          onScroll={this.onScrollListener}
          style={styles.scroll}>
          {this.props.renderHeaderView ? this.props.renderHeaderView : null} 
          <View style={styles.container}>
            {
              dataSource.map((item, index) => {
                const key = keyExtractor(item, index)
                this.keyToIndexMap.set(key, index)
                return (
                  <View
                    key={key}
                    {...this._panResponder.panHandlers}
                    onLayout={event => this._setLayoutData(key, event)}
                  >
                    {renderItem(item, index, false)}
                  </View>
                )
              })
            }
          </View>
          {this.props.renderBottomView ? this.props.renderBottomView : null}
        </ScrollView>
      </View>
    )
  }

scrollState 是我修改源码的部分.
@JonsonHI