Question

我有一个平面对象，它们正在屏幕上显示。除了每个对象，我还有4个箭头按钮（向左，向右，向上，向下）；每次单击时，阵列应像一棵树。（仅与点击事件有关的拖放）例如，如果我单击第三个对象的左按钮，它将成为第二个对象的子代。我最多可以有3个级别。

如果我单击同一对象的向右箭头按钮，它将返回到其原始位置。

向上和向下箭头按钮仅更改对象之间的位置（它们必须是同级对象）；

const data = [
{id: 1, name: 'spiderman', parentId: '', child: []}, 
{id: 2, name: 'batman', parentId: '', child: []},     
{id: 3, name: 'robin', parentId: '', child: []},  <-
{id: 4, name: 'joker', parentId: '', child: []},
]

click left on object with id = 3


const data = [
{id: 1, name: 'spiderman', parentId: '', child: []}, 
{id: 2, name: 'batman', parentId: '', child: [                 <-
        {id: 3, name: 'robin', parentId: '2', child: []}]},     
{id: 4, name: 'joker', parentId: '', child: []},
]

click left on object with id = 2



const data = [
{id: 1, name: 'spiderman', parentId: '', child: [
            {id: 2, name: 'batman', parentId: '1', child: [                 
                {id: 3, name: 'robin', parentId: '2', child: []}]}]}, ->

{id: 4, name: 'joker', parentId: '', child: []},
]


click right on object with id = 3


const data = [
{id: 1, name: 'spiderman', parentId: '', child:[
            {id: 2, name: 'batman', parentId: '1', child:[] ]},
            {id: 3, name: 'robin', parentId: '1', child: []}      ↑
{id: 4, name: 'joker', parentId: '', child: []}
]

click up on object with id = 3

const data = [
{id: 1, name: 'spiderman', parentId: '', child:[
            {id: 3, name: 'robin', parentId: '1', child: []}      
            {id: 2, name: 'batman', parentId: '1', child:[] ]},
{id: 4, name: 'joker', parentId: '', child: []}
]

像拖放一样操作对象数组

0 个答案: