fix:修复拖动重复copy

platform/example/src/App.tsx

@@ -36,7 +36,8 @@ const dndList = [
  originalIndex: index,
  data: content,
  children:TmpDndList.map(e=>{
- e.id = e.id+String(index)+"5555"
+ e.id = String(new Date().getTime()+Math.random())+index
+ e.children = []
  return e
  })
  }
@@ -63,7 +64,7 @@ const Titlecom = ()=>{
  <div>组件：</div>
  <div>
  {list2.map((item) => {
- return <span style={{margin:"0 10px"}} key={item.index}>
+ return <span style={{}} key={item.index}>
  <CustDrag data={item} key={item.index} />
  </span>;
  })}
@@ -73,6 +74,9 @@ const Titlecom = ()=>{
 }
 const DndPage = ({data}) => {
  const tagStore = getDropStoreId()
+ if(!Array.isArray(data)){
+ data = []
+ }
  const [list, setList] = useState(data);
  list.forEach((e)=>{
  if(!e.tag){
@@ -90,6 +94,7 @@ const DndPage = ({data}) => {
  const insertCard = useCallback(
  (atIndex: number, element:any) => {
  element.list = list;
+
  element.setList = setList
  element.tag = tagStore.tag
  setList(
@@ -146,6 +151,28 @@ const DndPage = ({data}) => {
  },
  [findCard, list, setList],
  )
+ const childrenCreate = useCallback((item:DropType,newItem:DropType) =>{
+ const Item = { ...newItem, id: String(new Date().getTime()) }
+ console.log(item.children)
+ if(!Array.isArray(item.children)){
+ item.children = [Item]
+ }else{
+ item.children.push(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
+ })
+ })
+ // setList(list)
+ console.log(item,newItem)
+ },[list])
  // const [, drop] = useDrop(() => ({ accept: ItemTypes.CARD }))
  // console.log(list)
  return (
@@ -153,8 +180,8 @@ const DndPage = ({data}) => {
  <div style={{ border: "1px solid #000","minHeight":"10px","zIndex":(tagStore.id*10)+"px" }}>
  {list&&list.map((item,index:number) => {
  return <span style={{margin:"0 10px"}} key={item.id}>
- <CardItem key={item.id} tag={tagStore.tag} len={list.length} data={item} deleteCard={deleteCard} insertCard={insertCard} moveCard={moveCard} findCard={findCard}>
- <DndPage data={item.children||[]} />
+ <CardItem key={item.id} tag={tagStore.tag} childrenCreate={(newItem)=>childrenCreate(item,newItem)} len={list.length} data={item} deleteCard={deleteCard} insertCard={insertCard} moveCard={moveCard} findCard={findCard}>
+ <DndPage data={item.children}  />
  </CardItem>
  </span>;
  })}

platform/example/src/CardItem.tsx

@@ -23,6 +23,7 @@ interface CardItemProps {
  findCard: (id: string,item:any) => { index: number }
  insertCard: (atIndex: number,item:any) => void
  deleteCard: (atIndex: number) => void
+ childrenCreate: (item: DropType) => void
  children?:any
 }
 
@@ -32,7 +33,7 @@ interface Item {
  originalIndex: number
 }
 const CardItem = memo((props:CardItemProps) => {
- const { moveCard,findCard,data,len,children,insertCard,deleteCard,tag:Propstag } = props
+ const { moveCard,findCard,data,len,children,insertCard,deleteCard,tag:Propstag,childrenCreate } = props
  const {id,index} = props.data
  // if(!props.data.tag){
  // props.data.tag = getDropStoreId()
@@ -60,11 +61,11 @@ const CardItem = memo((props:CardItemProps) => {
  }),
  [id, originalIndex, moveCard],
  )
- const [{isOver,canDrop}, drop] = useDrop(
+ const [{isOver,canDrop,isOverCurrent}, drop] = useDrop(
  () => ({
  accept: ItemTypes.CARD,
  hover(item: any,monitor) {
- const { id: draggedId } = item;
+ const { id: draggedId,tag } = item;
  // if (draggedId !== id) {
  // const { index: overIndex } = findCard(id,item)
  // moveCard(draggedId, overIndex,item)
@@ -85,8 +86,9 @@ const CardItem = memo((props:CardItemProps) => {
  }
  return
  }
+ // console.log(tag,data.tag)
  // 存在id，id不同时，移动
- if (draggedId !== id) {
+ if (tag===data.tag&&draggedId !== id) {
  const { index: overIndex } = findCard(id,item)
  moveCard(draggedId, overIndex,item)
  }
@@ -94,23 +96,29 @@ const CardItem = memo((props:CardItemProps) => {
  collect:monitor => ({
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
+ isOverCurrent: monitor.isOver({ shallow: true }),
  }),
  drop:(item, monitor)=>{
  console.log(item,monitor,data)
+ // const didDrop = monitor.didDrop()
+ // if(!didDrop){
+ // return
+ // }
  const { id: currentId,tag } = item
  if(currentId&&tag===Propstag) 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)
  }
  let { index: overIndex } = findCard(id,item)
- console.log(overIndex,id,item,currentId,item.list)
- if (overIndex!==undefined) {
- const { index: overIndex } = findCard(id,item)
- moveCard(currentId, overIndex,item)
- positionRef.current = null
-  return;
- }
+ console.log(overIndex,id,tag,Propstag,item,currentId,item.list)
+ // if (overIndex!==undefined) {
+ //  const { index: overIndex } = findCard(id,item)
+ //  moveCard(currentId, overIndex,item)
+ //  positionRef.current = null
+ // return;
+ // }
  if(positionRef.current === 'bottom') overIndex += 1
  const newItem = { ...item, id: String(new Date().getTime()) }
  insertCard(overIndex, newItem)
@@ -123,24 +131,55 @@ const CardItem = memo((props:CardItemProps) => {
  }),
  [findCard, moveCard],
  )
+
+ const [{childrenIsOver,childrenIsOverCurrent},childrenDrop] = useDrop(()=>({
+ accept: ItemTypes.CARD,
+ drop:(item, monitor)=>{
+ const isOver = monitor.isOver({ shallow: false })
+ if(isOver){
+ console.log(item,monitor,data.tag,data)
+ const newItem = { ...item, id: String(new Date().getTime()) }
+ childrenCreate(newItem)
+ return
+ }
+ // console.log(monitor.getDropResult())
+ // console.log(monitor.didDrop())
+
+ },
+ collect: (monitor) => ({
+ isOver: monitor.isOver(),
+ isOverCurrent: monitor.isOver({ shallow: true }),
+ }),
+ }),[data])
  const chilDrenMouseEnter = (e) =>{
  console.log(e)
  }
+ let backgroundColor = 'rgba(0, 0, 0, .5)'
+ let childrenBackgroundColor = 'rgba(0, 0, 0, .2)'
+ if (isOverCurrent || isOver) {
+ backgroundColor = 'darkgreen'
+ }
+ if (childrenIsOver || childrenIsOverCurrent) {
+ childrenBackgroundColor = 'red'
+ }
+
  const opacity = isDragging ? 0 : 1
  // console.log(data)
  return (
- <div ref={(node) => drag(node)}>
- <div ref={(node) => drag(drop(node))}>
+ <div >
+ <div ref={(node) => drag(drop(node))} style={{"backgroundColor":backgroundColor,margin:"0 10px"}}>
  <div ref={nodeRef}>
- {data?.data?.value}
+ { (isOver && canDrop && positionRef.current === 'top') && <div >拖拽到此处top</div> }
+ <span>组件名称{data?.data?.value}</span>
+ { (isOver && canDrop && positionRef.current === 'bottom' && originalIndex !== len-1 ) && <div >拖拽到此处bottom</div> }
+ { (isDragging && canDrop && originalIndex === len-1 && positionRef.current !== 'top') && <div >拖拽到此处len</div> }
  </div>
 
  </div>
- <div ref={(node) => drop(node)} className={"children"} style={{"paddingLeft":"20px","minHeight":data.children?"50px":"0px"}}>
- { (isOver && canDrop && positionRef.current === 'top') && <div >拖拽到此处top</div> }
+ <div ref={(node)=>childrenDrop(node)} className={"children"} style={{"paddingLeft":"20px","minHeight":"50px","backgroundColor":childrenBackgroundColor}}>
+
  {props.children}
- { (isOver && canDrop && positionRef.current === 'bottom' && originalIndex !== len-1 ) && <div >拖拽到此处bottom</div> }
- { (isDragging && canDrop && originalIndex === len-1 && positionRef.current !== 'top') && <div >拖拽到此处len</div> }
+
  </div>
 
  </div>

platform/example/src/component/CustDrop.tsx

@@ -25,6 +25,8 @@ const getDropStoreId = () =>{
 export interface DropType {
  tag:string
  type:dropType
+ list:DropType[]
+ setList?:Function
  id:string
  index:number,
  originalIndex: number