Move Javascript Object within Multidimensional Array / Object By ID or Path?

问题

I am working on a new kind of drag and drop nestable menu admin that uses JSON as it's source data and always rebuilds from JSON, rather than hoping that the .serialize() functions people keep using will work.

Here is a link to where I am at: https://codepen.io/ajhalls-the-selector/pen/qBaPRyr

I have a couple helper functions that get me some of what I need from the events. I need to be able to move, or copy, elements (including all sub elements) to a new destination. The copy part was easy, but the move proved more challenging, so I was looking for some help.

If I drag Harry to Gwen, I will want the Harry to be nested under Gwen. By using the callbacks, I know the id of each element, I can also get back the path for each using the findPath function, but then how to move it?

Using the moveJson() function, I can easily add the item to the new location, but I can't seem to find how to delete the original.

function moveJson( Path, NewItem){
    
    eval(Path).children.push(NewItem); // this works to copy
    delete NewItem;
    eval(delete NewItem); //also tried
    delete eval(NewItem); // and this
}
moveJson('jsonData[0]["children"][1]["children"][0]',jsonData[1]);

I have tried a number of ways to pass the variables in using strings, or not, and multiple ways to delete. I have tried creating new objects to return instead of modifying the global. I tried flattening it, then moving it while flattened, and unflattening, but the string.includes() doesn't work when you give it strings with brackets.

Any tips for a simpler way of relocating an object using it's ID, or using it's absolute path?

As a side note, I realize eval() is discouraged, but not sure yet a better way of keeping things extremely dynamic. Since I don't know how deeply nested this dataset may get, working with the string result from findPath was nice and easy.

Here is the data I was working with:

var jsonData = [
  {
    "id": 1,
    "parent_id": "0",
    "capacity": 2,
    "name": "Alan",
    "group": "BootstrapGlyphicon",
    "code": "",
    "prefix": "",
    "modifier": "",
    "custom": "",
    "sortorder": null,
    "status": "INACTIVE",
    "ui": {
      "draggable": "true",
      "ondragstart": "dragstart_handler(event);",
      "ondragend": "dragend_handler(event);",
      "ondrop": "drop_handler(event);",
      "ondragover": "dragover_handler(event);"
    },
    "children": [
      {
        "id": 2,
        "parent_id": "1",
        "capacity": 2,
        "name": "Samantha",
        "group": "BootstrapGlyphicon",
        "code": "",
        "prefix": "",
        "modifier": "",
        "custom": "",
        "sortorder": null,
        "status": "INACTIVE",
        "ui": {
          "draggable": "true",
          "ondragstart": "dragstart_handler(event);",
          "ondragend": "dragend_handler(event);",
          "ondrop": "drop_handler(event);",
          "ondragover": "dragover_handler(event);"
        },
        "children": [{
            "id": "5",
            "parent_id": "3",
            "capacity": 2,
            "name": "Harry",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          },{
            "id": "7",
            "parent_id": "3",
            "capacity": 2,
            "name": "Pepper",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          }]
      },
      {
        "id": 3,
        "parent_id": "1",
        "capacity": 2,
        "name": "Charlie",
        "group": "BootstrapGlyphicon",
        "code": "",
        "prefix": "",
        "modifier": "",
        "custom": "",
        "sortorder": null,
        "status": "INACTIVE",
        "ui": {
          "draggable": "true",
          "ondragstart": "dragstart_handler(event);",
          "ondragend": "dragend_handler(event);",
          "ondrop": "drop_handler(event);",
          "ondragover": "dragover_handler(event);"
        },
        "children": [
          {
            "id": 4,
            "parent_id": "3",
            "capacity": 2,
            "name": "Gwen",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          }
        ]
      }
    ]
  },
        {
            "id": 6,
            "parent_id": "3",
            "capacity": 2,
            "name": "David",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          }
];

来源：https://stackoverflow.com/questions/65417675/move-javascript-object-within-multidimensional-array-object-by-id-or-path