манипулировать массив объектов перетаскивать одинаково - PullRequest
Новая
       7

манипулировать массив объектов перетаскивать одинаково

0 голосов
/ 23 апреля 2019

У меня есть плоский массив объектов, который я отображаю на экране. В стороне от каждого объекта у меня есть 4 кнопки со стрелками (влево, вправо, вверх, вниз); при каждом щелчке массив должен действовать как дерево. (вид перетаскивания только с событиями щелчка) Например, если я нажал на левую кнопку 3-го объекта, он стал дочерним для 2-го объекта. Я могу иметь до 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: []}
]
...