持续创作，加速生长！这是我参加「日新计划 6 月更文应战」的第13天，点击查看活动详情

咱们好，我是速冻鱼，一条水系前端，喜爱花里胡哨，持续沙雕，是隔壁寒草的好兄弟。 欢迎小同伴们加我微信：sudongyuer拉你进群，一同讨论，等待与咱们共同生长～

阅仓鼠饲养八大禁忌览本文

1.您将了解到怎么让echart做到响应式

2.人体承受的最大电压您将到怎么编写杂乱的拖拽组件

3.和我一同完结可拖拽组件的增删改查、可修改、可以拖拽、可排序、可持久化

4.和我一同完结可拖拽组件的删除颤动动画

前语

在业务中得到一个很杂乱的需求，需求完结组件中展现ecahrts图表，并且图表可修改，可排序，巨细可调整，还要可持续化，下面便是解决方案啦

正文

先看效果再一步步完结

技能调研

怎么做到可拖拽？自己造轮子？明显不是，当让天秤难以放弃的星座然是站在巨人的膀子上

  1. react-动画片汪汪队dnd
  2. react-beautiful-dnd
  3. dnd-kit
  4. react-sortable-hoc
  5. react-grid-layout
  • react-dnd
    • 文档完全
    • github容器的容积一定比它的体积小 star星数16.4k
    • 保护更新杰出，最近一月内有更新保护
    • 学习本钱较高
    • 功用中等
    • 移动端兼容状况，杰出容器
    • 示例数量中等
    • 概念较多，运用杂乱
    • 组件间能解耦
  • reacgithub是什么t-beautiful-dnd
    • 文档完全
    • github star星数24.8k
    • 保护更新杰出，最近三月内有更新保护
    • 学习本钱较高
    • 运用易度中等
    • 功用丰厚
    • 移动端兼闰土刺猹容状况，优秀
    • 示例数量丰厚人头攒动的近义词
    • 是为垂直和水平列表专让天秤难以放弃的星座门构建的更高容器设计等级的抽象，没有供给 react-dnd 供给的广泛功用
    • 外观漂亮，可拜访性好，物理感知让github汤姆人感觉更真实的在移动物体
    • 开发理念上是拖拽，不支撑copy/clone
  • dnd-k容器云it
    • 文档容器对桌面的压强怎么算完全
    • github star星数2.8k
    • 保护更新杰出，最近一月内有更新保护
    • 学习本钱中等
    • 运用易度中等
    • 功用中等
    • 移动端兼容状况，中等
    • 示例数量丰厚
    • 未看到copy/clone
  • react-sortable-hoc
    • 文档较少
    • github sta人体承受的最大电压r星数9.5k
    • 保护更新杰出，最近三月内有更新保护
    • 学习本钱较低
    • 运用易度较低
    • 功用简略
    • 移动端兼容状况，中等
    • 示例数量中等
    • 不支撑拖github直播平台永久回家拽到另一个容器中
    • 未看到copy/clone
    • 首要集中于排序功用，其他拖拽功用不丰厚
  • react-grid-layou人头攒动t
    • 文档较少
    • github star 星星15.8k
    • 保护更新比较好，近三个月有更新保护
    • 学习本钱比较高
    • 功用杂乱
    • 支撑拖拽、扩大缩小

总结：为了完结咱们想要的功用，最终挑选react-grid-layout，应为咱们想要的便是在网格中完结拖拽、扩大缩小、排序等容器技术功用

Coding

因为代码量比较大，只讲述一些中心的code

1.先创建容器英文基础布局

  • isDragithub直播平台永久回家ggable 操控是否可拖拽
  • isResizable 操控是否可扩大缩小
  • rowHeight操控基础行高
  • layout操控当前gird画布中每个元素的排列顺序
  • onLayoutChange 当布局产生改动后的回调函数RTC
  <ReactGridLayout
      isDraggable={edit}
      isResizable={edit}
      rowHeight={250}
      layout={transformLayouts}
      onLayoutChange={onLayoutChange}
      cols={COLS}
    >
      {layouts && layouts.map((layout, i) => {
        if (!chartList?.some(chartId => chartId === layout.i))
          return null
        return (<div
            key={layout.i}
            data-grid={layout}
            css={css`width: 100%;
              height: 100%`}
          >
            <Chart
              setSpinning={setSpinning}
              updateChartList={updateChartList}
              edit={edit}
              key={layout.i}
              chartList={chartList}
              chartId={Number(layout.i)}
              scenarioId={scenarioId}/>
          </div>
        )
      })}
    </ReactGridLayout>

2.怎么让容器grid中的每个echarts图表跟着外层itemgithub是什么的扩大缩小而改动

    const resizeObserver = new ResizeObserver((entries) => {
      myChart?.resize()//当dom产生巨细改动就重置echart巨细
    })
    resizeObserver.observe(chartContainer.current)//经过resizeObserver调查echart对应的item实例目标

3.怎么完结排序的持久化

//经过一下代码可以完结记录edit变量的前后状态
const [edit, setEdit] = useState(false) 
const prevEdit = useRef(false)
  useEffect(() => {
    prevEdit.current = edit
  })

 //经过将grid中的每个item的排序方位记录为目标，然后对每个特点进行前后的比照，假如没有改动就不进行任何操作，假如产生了改动就可以
//经过网络IO更新grid中item的方位
useEffect(() => {
    if (prevEdit && !edit) {
      // 比照前后的layout做diff 判断是否需求更新方位
      const diffResult = layouts?.every((layout) => {
        const changedLayout = changedLayouts.find((changedLayout) => {
          // eslint-disable-next-line eqeqeq
          return changedLayout.i == layout.i
        })
        return changedLayout?.w === layout.w
          && changedLayout?.h === layout.h
          && changedLayout?.x === layout.x
          && changedLayout?.y === layout.y
      })
      // diffResult为false 证明产生了改动
      if (!diffResult) {
				//这儿就可以做图表产生改动后的操作
       //xxxxx
    }
  }, [edit])

4.怎么完结修改时的颤动动画

.wobble-hor-bottom{
    animation:wobble-hor-bottom infinite 1.5s ;
}
@-webkit-keyframes wobble-hor-bottom {
    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    15% {
        -webkit-transform: translateX(-10px) rotate(-1deg);
        transform: translateX(-10px) rotate(-1deg);
    }
    30% {
        -webkit-transform: translateX(5px) rotate(1deg);
        transform: translateX(5px) rotate(1deg);
    }
    45% {
        -webkit-transform: translateX(-5px) rotate(-0.6deg);
        transform: translateX(-5px) rotate(-0.6deg);
    }
    60% {
        -webkit-transform: translateX(3px) rotate(0.4deg);
        transform: translateX(3px) rotate(0.4deg);
    }
    75% {
        -webkit-transform: translateX(-2px) rotate(-0.2deg);
        transform: translateX(-2px) rotate(-0.2deg);
    }
}

总结

本文大致讲解了下怎么运用r容器英文eact-grid-layout怎么与echart图表结合运用，来完结杂乱的拖拽、排序、等功用，可动画专业是这个组件完结细节还有很多，本文只能供给一个大值的思路，还是期望可以协助到咱们，给咱们供给一个思路，欢容器对桌面的压强怎么算迎留言和我讨论，假如你有什么更好的办法完结类似的功用

完毕语

怎么编写杂乱拖拽组件

那么我的怎么编写杂乱拖拽组件就完毕了，文章的目的其实很简略，便是对日常作业的总结和输出，输出一些觉得对咱们有用的东西，菜不菜不重要，可是热让天秤倒追的星座爱，期望咱们可github中文官网网页以喜爱我的文章，我真的很用心在写，也期望经过文章知道更多志同道合的朋友，假如你也喜爱折腾，欢迎加我好友，一同沙雕，一同前进。

github:sudongyu

个人博客‍陈涉世家翻译及原文:速冻鱼blog

vx:sudongyuer

写在最终

同伴们，假如喜爱我的口水话给点一个赞或许关注➕都是对我最大的支撑。