Identify objects for drag and drop swapping

49 Views Asked by At

I am working on a project where cameras can be dragged and dropped onto targets, which are basically grids of dropzones. When a camera is dragged onto a dropzone, it should swap with the current content of that dropzone such that, what was in the dropzones content should now be where the dragged camera was and what was where the dragged camera was is now in the content of the dropzone. Image of the project

My idea is to do something along the lines of this:

const draggedItem = cameras[i];
const target = targets[i].dropozones[i].content;
const temp = draggedItem;
draggedItem = target;
target = temp;

In this example an item is dragged from the cameras to the dropzone of a target. I also want it to swap when a camera from a dropzone is dragged onto another dropzone. The problem I am having is how to identify the dragged item and droptarget. I have tried using a bunch of find(), includes() and indexOf() to find the indexes I need to do the swapping. However this seems overkill and did not work either.

I am using vuejs. The target and camera array are components from which I am passing the drag events to App.vue where the following 'data structure'(I am not sure what to call this) is under data().

cameras: [
    {
      id: 1,
      name: "CAM_1",
    },
  ],
  targets: [
    {
      id: 5,
      title: "TARGET_1",
      columns: 3,
      rows: 3,
      dropzones: [
        {
          zoneNum: 0,
          content: [
            {
            id: 4,
            name: "CAM_4",
            },
          ],
        },
        {
          zoneNum: 1,
          content: [],
        },
        {
          zoneNum: 2,
          content: [],
        },
        {
          zoneNum: 3,
          content: [],
        },
        {
          zoneNum: 4,
          content: [],
        },
        {
          zoneNum: 5,
          content: [],
        },
        {
          zoneNum: 6,
          content: [],
        },
        {
          zoneNum: 7,
          content: [],
        },
        {
          zoneNum: 8,
          content: [],
        }
      ]
    }
  ],
}

To sum up, I am looking for a method to get a certain camera, that is in the cameras-array or in a dropzone, so I can swap them. Through my research I have stumbled across DFS and BFS, but dont know if that is useful in this situation.
Really hoping someone could help me out here. Thanks in advance.

0

There are 0 best solutions below