React實(shí)現(xiàn)拖拽排序

最近有個(gè)需求, 需要實(shí)現(xiàn)一下拖拽排序, 不需要?jiǎng)赢? 能實(shí)現(xiàn)功能即可. 現(xiàn)有的類庫就不太想集成, 自己手?jǐn)]一下, 實(shí)現(xiàn)即可.

1. 首先設(shè)置state

constructor(props) {
    super(props);
    this.state = {
      dataArray: [],
      dragElement: null,
      lock: true,
    };
  }

這個(gè)dataArray就是我們的數(shù)據(jù)源

2. 在componentDidMount中阻止一下dragover和drop的默認(rèn)行為

componentDidMount() {
    document.addEventListener('dragover', this.preventDefault);
    document.addEventListener('drop', this.preventDefault);
  }

這里的this.preventDefault方法是我自己封裝了一下的

preventDefault = (e) => {
   e.preventDefault();
 }

3. 在componentWillUnmount中刪除監(jiān)聽器

componentWillUnmount() {
    document.removeEventListener('dragover', this.preventDefault);
    document.removeEventListener('drop', this.preventDefault);
  }

4. 給要排序的元素實(shí)現(xiàn)如下屬性

sortableCard = (sortableInfo) => {
    const { id } = sortableInfo;
    }
    return (
      <div
        key={id}
        draggable
        onDragStart={() => {
          this.setState({
            dragElement: sortableInfo,
          });
        }}
        onDragEnd={(e) => {
          e.preventDefault();
        }}
        onDragEnter={() => {
          if (id !== this.state.dragElement.id) {
            const oldDragIndex = _.findIndex(this.state.dataArray, item => item.id === this.state.dragElement.id);
            const oldEnterIndex = _.findIndex(this.state.dataArray, item => item.id === sortableInfo.id);
            if (oldDragIndex > oldEnterIndex) {
              const newDataArray= this.state.dataArray.filter(item => item.id !== this.state.dragElement.id);
              const insertIndex = _.findIndex(newDataArray, item => item.id === sortableInfo.id);
              newDataArray.splice(insertIndex, 0, this.state.dragElement);
              this.setState({ dataArray: newDataArray });
            } else {
              const newDataArray = this.state.dataArray.filter(item => item.id !== this.state.dragElement.id);
              const insertIndex = _.findIndex(newDataArray, item => item.Id === sortableInfo.id) + 1;
              newDataArray.splice(insertIndex, 0, this.state.dragElement);
              this.setState({ dataArray: newDataArray });
            }
            this.setState({
              isConfigDirty: true,
            });
          }
        }}
        onDragLeave={() => {
          if (sortableInfo.id !== this.state.dragElement.id) {
            if (this.state.lock && sortableInfo.id === this.state.dataArray[this.state.dataArray.length - 1]) {
              const newDataArray = this.state.dataArray.filter(item => item.id !== this.state.dragElement.id);
              newDataArray.push(this.state.dragElement);
              this.setState({
                lock: false,
              }, () => {
                this.setState({
                  dataArray: newDataArray,
                });
              });
            } else {
              this.setState({
                lock: true,
              });
            }
          }
        }}
      >
          <div>你的東西</div>
      </div>
    );
  }


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 1、什么是核心動(dòng)畫 Core Animation(核心動(dòng)畫)可以用在Mac OS X和iOS平臺, 是一組功能強(qiáng)大...
    6ffd6634d577閱讀 202評論 0 1
  • 今晌蟬鳴微微飄, 小坐禪臺思浪濤。 門外三生纏綿島, 屋內(nèi)閱遍古離騷。
    明續(xù)閱讀 176評論 0 0
  • 曾經(jīng)那個(gè)在我們心目中天真無邪的小燕子,一轉(zhuǎn)眼嫁了人有了孩子,不僅如此,演電影不過癮的她,親自上陣做導(dǎo)演,靠《致青春...
    魔怔君閱讀 338評論 0 0