React-smooth-dnd

前段时间，项目里有一个新的需求是关于三级拖拽的，我本身也在参与其它项目的开发，并没有时间做技术调研，庆幸同事有人做过相似需求的开发，经过同事的技术支持，在需求规定的时间内完成了开发，在这里我要感谢我的同事的帮助，感谢团队里的每一个人，笔芯。

再次回顾这次需求，时间上有明确的 deadline ，功能和业务的复杂度超乎预期想象，而且没有足够的开发时间，在参加需求开发之前有其它的需求开发并没有做技术调研，总结有以下几个重要的点：

  • 大的功能开发前如果有技术难点一定要做调研。

  • 开发前必须要明确需求的点，包括 ui 交互。

  • 预估时间一定要预留足够的 buffer 。

现在我们来说说怎样去实现一个三级拖拽。

首先，完成这次功能我们使用了一个 react 库。

react-smooth-dnd.png
  1. 该库是一个快速、轻量、可排序的库。
  2. 该库使用 css 转换来制作动画。
  3. 该库是在基于 react-dnd 基础上开发的 react 拖动效果的组件。
  4. 该库现在有 1.4k 星，使用效果还不错。

其次，让我们看看怎么使用 react-smooth-dnd。

import { Container, Draggable } from 'react-smooth-dnd';

<Container onDrop={onDrop}>
  {data.map((item) => (
    <Draggable>
      <div className={styles.item}>
        {item.label}
      </div>
    </Draggable>
  ))}
</Container>

Container 标签： 拖动的容器，即在 Container 内可以拖动，里面可以包容若干个 Draggable 。
Draggable 标签：拖动的元素，把要拖动的内容放在 Draggable 里就可以实现拖拽。

注意：Container 下面必须直接包含 Draggable，否则会报错。

最后，让我们了解一下 react-smooth-dnd 都有什么 api。

一. Container api
1. groupName

拖动容器的名称，当有多个 Container 时，groupName 名称相同时可以实现相互拖动。

2. orientation

容器的方向。可选值：

  • horizontal (水平)
  • vertical (默认，垂直)
3. behaviour

规定了拖动元素的状态，可选值有 4 个：

  • move（默认，移动）
  • copy（复制）
  • drop-zone（跌落）
  • contain（包含）
4. lockAxis

限制当前拖动的方向。可选值有：x, y，表示 x, y 轴拖动。

5. dragClass

拖动元素被拖动时的样式。

6. dropClass

拖动元素被释放时的样式。

7. dropPlaceholder

拖动元素拖走时或进入其他位置时，用于占位当前元素的配置。

可配置值：

  • className 占位元素样式
  • animationDuration 动画延时
  • showOnTop
8. dragBeginDelay

延时拖动，时间为毫秒。用在防误操作的情况，或者在拖动的元素上有其它的事件的情况。

9. onDragStart

拖动开始会触发此事件

10. onDragEnd

拖动结束会触发此事件

11. onDrop

拖动释放会触发此事件

12. getChildPayload

记录当前拖动元素的信息，使用该函数返回一个 payload 的值。当 onDrop 触发时，会自动带入该函数返回的信息，用于做数据的处理。

13. onDragEnter

拖动进入会触发此事件

14. onDragLeave

拖动离开会触发此事件

15. getGhostParent

当多层拖动且容器名称相同时，下层元素向上拖动会出现拖动元素不可见，此时可以设置此函数。

二. Draggable api
1. render
<Draggable render={() => {
  return (
    <li>
      ...
    </li>
  )
}}/>

render 返回一个 dom 元素。

当 render 存在时会忽略 Draggable 的 children。

做好准备工作之后，现在我们来简单实现一下一层的排序功能：

import React, { useState } from 'react';
import { connect } from 'dva';
import { Container, Draggable } from 'react-smooth-dnd';
import styles from './IndexPage.css';

const list = [
  { label: '第一个数据', fieldName: 'data-a1', children: [] },
  { label: '第二个数据', fieldName: 'data-a2', children: [] },
  { label: '第三个数据', fieldName: 'data-a3', children: [] },
];

function IndexPage() {
  const [data, setData] = useState(list);

  const onDrag = (arr = [], dragResult) => {
    const { removedIndex, addedIndex, payload } = dragResult;
    if (removedIndex === null && addedIndex === null) {
      return arr;
    }
    const result = [...arr];
    let itemToAdd = payload;
    if (removedIndex !== null) {
      itemToAdd = result.splice(removedIndex, 1)[0];
    }
    if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd);
    }
    return result;
  };

  const onDrop = (dropResult) => {
    const { removedIndex, addedIndex } = dropResult;
    if (removedIndex !== null || addedIndex !== null) {
      const list = onDrag(data, dropResult);
      setData(list);
    }
  }

  return (
    <div className={styles.container}>
      <Container onDrop={onDrop}>
        {data.map((item) => (
          <Draggable>
            <div className={styles.item}>
              {item.label}
            </div>
          </Draggable>
        ))}
      </Container>
    </div>
  );
}

export default connect()(IndexPage);

可以发现，实现一层的功能是很简单的，首先是准备好数据，写好 dom 结构，最后写好 onDrop 函数，一层排序的功能就做好了。是不是 so easy ?

那么现在我们尝试实现三层的功能。三层如何实现呢？我们可以假设每一个拖动的元素同时又是一个容器，即每一个 Draggable 下面又有一个 Container ,不就实现了嵌套吗？现在我们实现一下：

第一步：准备好数据。

const list = [
  { label: '第一个数据', fieldName: 'data-a1', children: [
    { label: '第二层', fieldName: 'data-b1', children: [
      { label: '第三层', fieldName: 'data-c1', children: [] },
      { label: '第三层2', fieldName: 'data-c2', children: [] },
    ] },
    { label: '第二层2', fieldName: 'data-b2', children: [] },
  ] },
  { label: '第二个数据', fieldName: 'data-a2', children: [] },
  { label: '第三个数据', fieldName: 'data-a3', children: [
    { label: '第二层3', fieldName: 'data-b3', children: [] },
  ] },
];

第二步：写好 dom 结构。

  // 利用递归实现列表的渲染
  const onDomRender = (renderData, parent, depth) => {
    if (depth === 4) return;
    return (
      <Container 
        groupName="col"
        onDrop={(value) => onDrop(value, parent, depth)}
        getChildPayload={(index) => renderData[index]}
      >
        {
          renderData.map((item) => {
            return (
              <Draggable key={item.fieldName}>
                <div className={styles.item} style={depth === 1 ? {marginBottom: '20px'} : {}}>
                  {item.label}
                  <div className={styles.box}>
                    {onDomRender(item.children, item, depth + 1)}
                  </div>
                </div>
              </Draggable>
            )
          })
        }
      </Container>
    )
  };

  ...这里调用 onDomRender 渲染界面
  <div className={styles.container}>
    {onDomRender(data, null, 1)}
  </div>

第三步：完成 onDrop 函数。

  // 处理拖拽的移除、添加
  const onDrag = (arr = [], dragResult) => {
    const { removedIndex, addedIndex, payload } = dragResult;
    if (removedIndex === null && addedIndex === null) {
      return arr;
    }
    const result = [...arr];
    let itemToAdd = payload;
    if (removedIndex !== null) {
      itemToAdd = result.splice(removedIndex, 1)[0];
    }
    if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd);
    }
    return result;
  };

  // 获取数据的索引
  const onGetIndex = (item, tempData, indexArr, lastIndex) => {
    tempData.length > 0 && tempData.forEach((ele, index) => {
      if (item.fieldName === ele.fieldName) {
        if (lastIndex !== undefined) {
          indexArr.push(lastIndex);
          indexArr.push(index);
        } else {
          indexArr.push(index);
        }
      } else if (ele.children.length && ele.children.length > 0) {
        onGetIndex(item, ele.children, indexArr, index);
      }
    })
    return indexArr;
  }

  // 处理跨层级的拖拽
  const onTreate = (current) => {
    const {
      removedIndex,
      addedIndex,
      removedDepth,
      addedDepth,
      removedParent,
      addedParent,
    } = current;
    if (removedIndex !== null && addedIndex !== null && removedIndex !== undefined && addedIndex !== undefined){
      let result = cloneDeep(data);
      // 添加
      if (addedDepth === 1) {
        result = onDrag(result, {...current, removedIndex: null});
      } else if (addedDepth === 2) {
        const tempData = onDrag(addedParent.children, {...current, removedIndex: null});
        const index = onGetIndex(addedParent, result, []);
        result[index[0]].children = tempData;
      } else if (addedDepth === 3) {
        const tempData = onDrag(addedParent.children, {...current, removedIndex: null});
        const index = onGetIndex(addedParent, result, []);
        result[index[0]].children[index[1]].children = tempData;
      }
      // 移除
      if (removedDepth === 1) {
        result = onDrag(result, {...current, addedIndex: null});
      } else if (removedDepth === 2) {
        const index = onGetIndex(removedParent, result, []);
        const parent = result[index[0]];
        const tempData = onDrag(parent.children, {...current, addedIndex: null});
        result[index[0]].children = tempData;
      } else if (removedDepth === 3) {
        const index = onGetIndex(removedParent, result, []);
        const parent = result[index[0]].children[index[1]];
        const tempData = onDrag(parent.children, {...current, addedIndex: null});
        result[index[0]].children[index[1]].children = tempData;
      }
      
      setData(result);
      setTemp({});
    }
  }

  // 拖拽释放
  const onDrop = (dropResult, parent, depth) => {
    const { removedIndex, addedIndex, payload } = dropResult;
    if (removedIndex !== null || addedIndex !== null) {
      // 同层拖拽
      if (removedIndex !== null && addedIndex !== null) {
        let result = cloneDeep(data);
        if (depth === 1) {
          result = onDrag(data, dropResult);
        } else if (depth === 2) {
          const tempData = onDrag(parent.children, dropResult);
          const index = onGetIndex(parent, result, []);
          result[index[0]].children = tempData;
        } else if (depth === 3) {
          const tempData = onDrag(parent.children, dropResult);
          const index = onGetIndex(parent, result, []);
          result[index[0]].children[index[1]].children = tempData;
        }
        setData(result);
      // 跨层拖拽，第一次执行
      } else if (temp.removedIndex === undefined && temp.addedIndex === undefined) {
        let flag = addedIndex !== null ? {addedDepth: depth, addedParent: parent} : {removedDepth: depth, removedParent: parent};
        setTemp({...dropResult, ...flag});
      // 跨层拖拽，非第一次执行（第一次执行了添加）
      } else if (temp.addedIndex !== null && temp.removedIndex === null && temp.payload.fieldName === payload.fieldName) {
        const current = { ...temp, removedIndex, removedDepth: depth, removedParent: parent };
        // 已有添加、移除操作，开始执行跨层级拖拽
        onTreate(current);
      // 跨层拖拽，非第一次执行（第一次执行了移除）
      } else if (temp.removedIndex !== null && temp.addedIndex === null && temp.payload.fieldName === payload.fieldName) {
        const current ={ ...temp, addedIndex, addedDepth: depth, addedParent: parent };
        // 已有移除、添加操作，开始执行跨层级拖拽
        onTreate(current);
      }
    }
  }

onDrop 函数处理相同层级的拖拽时，根据 depth 来决定处理几层的数据，然后更新 state 来重新渲染页面；处理跨层级的拖拽时调用了 onTreate 函数，这里为什么要加 temp 来存储上次的操作呢？因为 react-smooth-dnd 在拖动元素时无法保证先返回添加事件或者移除事件，所以我们将上次的操作（添加、移除）存储在 temp 里，等到下个操作（移除、添加）时再来处理拖动事件，并把 temp 置 {}。

onTreate 函数负责处理跨层级的拖拽。先执行添加操作，后执行移除操作。在这里调用了 onDrag 函数来执行添加、移除的操作，onGetIndex 函数来确定处理数据的索引。

注意：在执行移除操作时要保证处理的是最新的数据。

最后，我们看一下完整的代码。

import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { cloneDeep } from 'lodash';
import { Container, Draggable } from 'react-smooth-dnd';
import styles from './IndexPage.css';

const list = [
  { label: '第一个数据', fieldName: 'data-a1', children: [
    { label: '第二层', fieldName: 'data-b1', children: [
      { label: '第三层', fieldName: 'data-c1', children: [] },
      { label: '第三层2', fieldName: 'data-c2', children: [] },
    ] },
    { label: '第二层2', fieldName: 'data-b2', children: [] },
  ] },
  { label: '第二个数据', fieldName: 'data-a2', children: [] },
  { label: '第三个数据', fieldName: 'data-a3', children: [
    { label: '第二层3', fieldName: 'data-b3', children: [] },
  ] },
];

function IndexPage() {
  const [data, setData] = useState([]);
  const [temp, setTemp] = useState({});

  useEffect(() => {
    setData(list);
  }, []);

  const onDrag = (arr = [], dragResult) => {
    const { removedIndex, addedIndex, payload } = dragResult;
    if (removedIndex === null && addedIndex === null) {
      return arr;
    }
    const result = [...arr];
    let itemToAdd = payload;
    if (removedIndex !== null) {
      itemToAdd = result.splice(removedIndex, 1)[0];
    }
    if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd);
    }
    return result;
  };

  const onGetIndex = (item, tempData, indexArr, lastIndex) => {
    tempData.length > 0 && tempData.forEach((ele, index) => {
      if (item.fieldName === ele.fieldName) {
        if (lastIndex !== undefined) {
          indexArr.push(lastIndex);
          indexArr.push(index);
        } else {
          indexArr.push(index);
        }
      } else if (ele.children.length && ele.children.length > 0) {
        onGetIndex(item, ele.children, indexArr, index);
      }
    })
    return indexArr;
  }

  const onTreate = (current) => {
    const {
      removedIndex,
      addedIndex,
      removedDepth,
      addedDepth,
      removedParent,
      addedParent,
    } = current;
    if (removedIndex !== null && addedIndex !== null && removedIndex !== undefined && addedIndex !== undefined){
      let result = cloneDeep(data);
      if (addedDepth === 1) {
        result = onDrag(result, {...current, removedIndex: null});
      } else if (addedDepth === 2) {
        const tempData = onDrag(addedParent.children, {...current, removedIndex: null});
        const index = onGetIndex(addedParent, result, []);
        result[index[0]].children = tempData;
      } else if (addedDepth === 3) {
        const tempData = onDrag(addedParent.children, {...current, removedIndex: null});
        const index = onGetIndex(addedParent, result, []);
        result[index[0]].children[index[1]].children = tempData;
      }
      if (removedDepth === 1) {
        result = onDrag(result, {...current, addedIndex: null});
      } else if (removedDepth === 2) {
        const index = onGetIndex(removedParent, result, []);
        const parent = result[index[0]];
        const tempData = onDrag(parent.children, {...current, addedIndex: null});
        result[index[0]].children = tempData;
      } else if (removedDepth === 3) {
        const index = onGetIndex(removedParent, result, []);
        const parent = result[index[0]].children[index[1]];
        const tempData = onDrag(parent.children, {...current, addedIndex: null});
        result[index[0]].children[index[1]].children = tempData;
      }
      
      setData(result);
      setTemp({});
    }
  }

  const onDrop = (dropResult, parent, depth) => {
    const { removedIndex, addedIndex, payload } = dropResult;
    if (removedIndex !== null || addedIndex !== null) {
      if (removedIndex !== null && addedIndex !== null) {
        let result = cloneDeep(data);
        if (depth === 1) {
          result = onDrag(data, dropResult);
        } else if (depth === 2) {
          const tempData = onDrag(parent.children, dropResult);
          const index = onGetIndex(parent, result, []);
          result[index[0]].children = tempData;
        } else if (depth === 3) {
          const tempData = onDrag(parent.children, dropResult);
          const index = onGetIndex(parent, result, []);
          result[index[0]].children[index[1]].children = tempData;
        }
        setData(result);
      } else if (temp.removedIndex === undefined && temp.addedIndex === undefined) {
        let flag = addedIndex !== null ? {addedDepth: depth, addedParent: parent} : {removedDepth: depth, removedParent: parent};
        setTemp({...dropResult, ...flag});
      } else if (temp.addedIndex !== null && temp.removedIndex === null && temp.payload.fieldName === payload.fieldName) {
        const current = { ...temp, removedIndex, removedDepth: depth, removedParent: parent };
        onTreate(current);
      } else if (temp.removedIndex !== null && temp.addedIndex === null && temp.payload.fieldName === payload.fieldName) {
        const current ={ ...temp, addedIndex, addedDepth: depth, addedParent: parent };
        onTreate(current);
      }
    }
  }

  // 利用递归实现列表的渲染
  const onDomRender = (renderData, parent, depth) => {
    if (depth === 4) return;
    return (
      <Container 
        groupName="col"
        onDrop={(value) => onDrop(value, parent, depth)}
        getChildPayload={(index) => renderData[index]}
      >
        {
          renderData.map((item) => {
            return (
              <Draggable key={item.fieldName}>
                <div className={styles.item} style={depth === 1 ? {marginBottom: '20px'} : {}}>
                  {item.label}
                  <div className={styles.box}>
                    {onDomRender(item.children, item, depth + 1)}
                  </div>
                </div>
              </Draggable>
            )
          })
        }
      </Container>
    )
  };

  return (
    <div className={styles.container}>
      {onDomRender(data, null, 1)}
    </div>
  );
}

export default connect()(IndexPage);

现在我们实现了三层拖拽，在完成的时候发现 getChildPayload 必须要明确给出，否则在拖拽完成后 onDrop 事件无法得到 payload 的值。

那还有其它的问题吗？

在拖拽的过程当中，我们也发现了子元素向上拖拽时会隐藏，这时我们想到了 getGhostParent 属性，我们再看一下效果，这回子元素向上拖拽时不会再出现隐藏的情况了。

<Container 
  groupName="col"
  onDrop={(value) => onDrop(value, parent, depth)}
  getChildPayload={(index) => renderData[index]}
  getGhostParent={() => document.body}
>
...
</Container>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342