fix:修复拖动各种问题,等待铺css

platform/example/package.json

@@ -52,6 +52,7 @@
  "typescript": "~4.2.3"
  },
  "devDependencies": {
+ "@types/lodash": "^4.14.195",
  "@types/react": "^16.14.43",
  "@vitejs/plugin-react": "3.1.0",
  "vite": "3.2.5",

platform/example/src/App.tsx

@@ -78,12 +78,13 @@ const Titlecom = ()=>{
 }
 
 const DndPage = ({data,parent}) => {
+ // console.log(data,parent?.data?.label)
  const tagStore = getDropStoreId()
  if(!Array.isArray(data)){
  data = []
  }
- const [list, setList] = useState(data);
+ // const [list, setList] = useState(data);
- list.forEach((e:DropType)=>{
+ data.forEach((e:DropType)=>{
  if(!e.tag){
  e.tag = tagStore.tag
  }
@@ -96,7 +97,6 @@ const DndPage = ({data,parent}) => {
  // 在当前位置插入模块
  const insertCard = useCallback(
  (currentDrop:DropType,atIndex: number, element:DropType) => {
- console.log(atIndex,element,list)
  // list.splice(atIndex,0,element)
  // console.log(list.length)
  // setList(list)
@@ -108,79 +108,76 @@ const DndPage = ({data,parent}) => {
  // ],
  // }),
  // )
+ console.log(currentDrop)
  drapStore.insertDrop(currentDrop,atIndex,element)
  },
- [list, setList],
+ [data],
  )
  // 删除当前模块
  const deleteCard = useCallback(
- (atIndex: number) => {
+ (currentDrop:DropType|null,item:DropType) => {
- setList(
+ // setList(
- update(list, {
+ // update(list, {
- $splice: [
+ // $splice: [
- [atIndex, 1],
+ // [atIndex, 1],
- ],
+ // ],
- }),
+ // }),
- )
+ // )
+ console.log(currentDrop)
+ if(currentDrop===null){
+ drapStore.removeDrop(item)
+ }else{
+ currentDrop.children = currentDrop.children?.filter(dropItem=>dropItem.id!==item.id)
+ console.log(currentDrop.children?.length)
+ drapStore.updateState()
+ }
  },
- [list, setList],
+ [data],
  )
  const findCard = useCallback(
  (id: string,item:any) => {
 
- const card = list.filter((c:DropType) => `${c.id}` === id)[0]
+ const card = data.filter((c:DropType) => `${c.id}` === id)[0]
  return {
  card,
- index: list.indexOf(card),
+ index: data.indexOf(card),
  }
  },
- [list],
+ [data],
  )
  const moveCard = useCallback(
- (id: string, to: number,item:any) => {
+ (id: string, to: number,item:DropType) => {
+ if(parent===null){
+ drapStore.moveDrop(id,to,item)
+ return;
+ }
+ console.log(id,to,item, parent)
  const { card, index } = findCard(id,item)
  if (card===undefined){
- // console.log(item)
- // 对象拷贝
- // list.push(JSON.parse(JSON.stringify(item)))
  return
  }
- setList(
+ const ord = data[to]
- update(list, {
+ data[to] = card
- $splice: [
+ data[index] = ord
- [index, 1],
+ drapStore.updateState()
- [to, 0, card],
+
- ],
- }),
- )
  },
- [findCard, list, setList],
+ [findCard, data],
  )
  const childrenCreate = useCallback((item:DropType,newItem:DropType) =>{
  const Item = { ...newItem, id: String(new Date().getTime()) }
  console.log({item},Item)
- // drapStore.addChildren(item,Item)
+ drapStore.addChildren(item,Item)
- // item.setList(item.list)
- // list.forEach(e=>{
- // console.log(e.children)
- // })
- // setList((listItem)=>{
- // return listItem.map(e=>{
- // e.children = [...e.children]
- // console.log(e.children)
- // return e
- // })
- // })
  console.log(item,newItem)
- },[list])
+ },[data])
  // const [, drop] = useDrop(() => ({ accept: ItemTypes.CARD }))
  // console.log(list)
  return (
  <DndProvider backend={HTML5Backend}>
  <div style={{ border: "1px solid #000","minHeight":"10px","zIndex":(tagStore.id*10)+"px" }}>
- {list&&list.map((item: DropType | null,index:number) => {
+ {data&&data.map((item: DropType | null,index:number) => {
  return <span style={{margin:"0 10px"}} key={item?.id}>
- <CardItem parent={item} key={item?.id} tag={tagStore.tag} childrenCreate={(newItem)=>childrenCreate(item as DropType,newItem)} len={list.length} data={item} deleteCard={deleteCard} insertCard={insertCard} moveCard={moveCard} findCard={findCard}>
+ <CardItem parent={parent} key={item?.id} tag={tagStore.tag} childrenCreate={(newItem)=>childrenCreate(item as DropType,newItem)} len={data.length} data={item} deleteCard={deleteCard} insertCard={insertCard} moveCard={moveCard} findCard={findCard}>
  <DndPage parent={item} data={item?.children} />
  </CardItem>
  </span>;

platform/example/src/CardItem.tsx

@@ -24,7 +24,7 @@ interface CardItemProps {
  moveCard: (id: string, to: number,item:any) => void
  findCard: (id: string,item:any) => { index: number }
  insertCard: (currentDrop:DropType|null, atIndex: number,item:DropType) => void
- deleteCard: (atIndex: number) => void
+ deleteCard: (currentDrop:DropType|null,item:DropType) => void
  childrenCreate: (item: DropType) => void
  children?:any
 }
@@ -53,12 +53,24 @@ const CardItem = memo((props:CardItemProps) => {
 
  }),
  end: (item, monitor) => {
- const { id: droppedId } = item
+ const { id: droppedId,tag } = item
  const didDrop = monitor.didDrop()
  if (!didDrop) {
  moveCard(droppedId, originalIndex,item)
  return
  }
+ // 相同组件不允许移动
+ if(props.tag===tag){
+ return
+ }
+ // 如果是根组件，不移除自身
+ if(props.parent===null){
+ return;
+ }
+ console.log(item,props.parent)
+ // 跨组件移动--移除自身
+ deleteCard(props.parent,props.data)
+
  },
  }),
  [id, originalIndex, moveCard],
@@ -68,11 +80,6 @@ const CardItem = memo((props:CardItemProps) => {
  accept: ItemTypes.CARD,
  hover(item: any,monitor) {
  const { id: draggedId,tag } = item;
- // if (draggedId !== id) {
- // const { index: overIndex } = findCard(id,item)
- // moveCard(draggedId, overIndex,item)
- // }
- // console.log(item,Propstag,isOver,canDrop)
  if(!draggedId) {
  const hoverBoundingRect = nodeRef?.current?.getBoundingClientRect() as DOMRect;
  const hoverMiddleY = (hoverBoundingRect?.bottom - hoverBoundingRect?.top) / 2;
@@ -88,7 +95,7 @@ const CardItem = memo((props:CardItemProps) => {
  }
  return
  }
- // console.log(tag,data.tag)
+ // console.log(tag,data.tag,draggedId,id)
  // 存在id，id不同时，移动
  if (tag===data.tag&&draggedId !== id) {
  const { index: overIndex } = findCard(id,item)
@@ -109,13 +116,8 @@ const CardItem = memo((props:CardItemProps) => {
  const { id: currentId,tag } = item
  if(tag===props.data.tag) return
  // if(currentId&&data.tag===tag) return
- if(Propstag!==tag&&Array.isArray(item.list)){
- // const itemList = item.list.filter((ele)=>ele.id!==currentId)
- // item.setList(itemList)
- // console.log(item)
- }
  let { index: overIndex } = findCard(id,item)
- console.log(overIndex,id,tag,Propstag,item,currentId,item.list)
+ console.log(overIndex,id,tag,Propstag,item)
  // if (overIndex!==undefined) {
  // const { index: overIndex } = findCard(id,item)
  // moveCard(currentId, overIndex,item)
@@ -125,8 +127,8 @@ const CardItem = memo((props:CardItemProps) => {
  if(positionRef.current === 'bottom') overIndex += 1
  if(tag!==Propstag){
  const newItem = { ...item, id: String(new Date().getTime()) }
+ console.log(data, props.data, props.data===props.parent)
  insertCard(props.parent,overIndex, newItem)
- console.log(1)
  }
 
 
@@ -151,7 +153,8 @@ const CardItem = memo((props:CardItemProps) => {
  if(tag!==Propstag){
  // @ts-ignore
  const newItem = { ...item, id: String(new Date().getTime()) }
- insertCard(props.parent,0, newItem)
+ // insertCard(props.parent,0, newItem)
+ childrenCreate(newItem)
  console.log(1)
  }
  return

platform/example/src/component/CustDrop.tsx

@@ -29,6 +29,7 @@ export interface DropType {
  index:number,
  originalIndex: number
  children?:DropType[]
+ parent:DropType|null
  data:Content
 }
 export interface Content {

platform/example/src/mobx/DrapStore.ts

@@ -1,8 +1,10 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
-import {observer} from "mobx-react"
+import { observer } from "mobx-react"
-import {makeAutoObservable, observable, action} from "mobx"
+import { makeAutoObservable, observable, action } from "mobx"
-import {Content, dropType, DropType} from "@/component/CustDrop.jsx";
+import { Content, dropType, DropType } from "@/component/CustDrop.jsx";
 import update from "immutability-helper";
+import _ from 'lodash'
+import cardItem from "@/CardItem";
 
 
 class DrapStore {
@@ -34,31 +36,72 @@ class DrapStore {
  }
  }
 
+ @action
+ updateState(){
+ this.setState(_.cloneDeep(this.state))
+ }
  @action
  insertDrop(drop: DropType, index: number, dropNew: DropType) {
- const children: DropType[] = this.treeListData.get(drop) || [];
+
- if (!drop.children) {
+ // const children: DropType[] = this.treeData.get(drop) || [];
- drop.children = children
+ // if (!drop.children) {
+ // drop.children = children
+ // }
+ if(drop===null){
+ this.state.splice(index,0,dropNew)
+ this.updateState()
+ return
  }
- console.log(drop, children, drop.children, dropNew)
+ console.log(drop, drop.children, dropNew)
+ drop.children?.splice(index,0,dropNew)
  // children.splice(index,0,dropNew)
- update(drop.children, {
+ // update(drop.children, {
- $splice: [
+ // $splice: [
- [index, 0, dropNew],
+ // [index, 0, dropNew],
- ],
+ // ],
- })
+ // })
+ this.updateState()
 
  }
-
+ @action
+ removeDrop(drop: DropType){
+ const state = this.state.filter(cardItem=>cardItem.id!==drop.id)
+ if(state.length!==this.state.length){
+ this.setState(state)
+ // this.updateState()
+ }
+ }
  @action
  addChildren(drop: DropType, dropNew: DropType) {
- if (!Array.isArray(drop.children)) {
+ let newDrop = this.treeData.get(drop);
- drop.children = [dropNew]
+ if(!newDrop) return
+ if (!Array.isArray(newDrop.children)) {
+ newDrop.children = [dropNew]
  } else {
- drop.children.push(dropNew)
+ newDrop.children.push(dropNew)
  }
+ this.updateState()
+
+ }
+ @action
+ moveDrop(id: string, to: number,item:DropType){
+ let drop = null
+ let index = -1
+ this.state.forEach((dropItem,idx)=>{
+ if(dropItem.id===item.id){
+ drop = dropItem
+ index = idx
+ }
+ })
+ if(drop===null){
+ return
  }
 
+ const ord = this.state[to]
+ this.state[to] = drop
+ this.state[index] = ord
+ this.updateState()
+ }
  @action
  setState(dropList: DropType[]) {
  this.state = dropList