diff --git a/platform/example/src/App.tsx b/platform/example/src/App.tsx
index a45ca20..2ba8eab 100644
--- a/platform/example/src/App.tsx
+++ b/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>;
                 })}
diff --git a/platform/example/src/CardItem.tsx b/platform/example/src/CardItem.tsx
index dfbea19..afc14e5 100644
--- a/platform/example/src/CardItem.tsx
+++ b/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>
diff --git a/platform/example/src/component/CustDrop.tsx b/platform/example/src/component/CustDrop.tsx
index ef4d100..d8ab34e 100644
--- a/platform/example/src/component/CustDrop.tsx
+++ b/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