What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)
I am trying to add drag and drop functionality. Please have a look at the following screenshot.
It is linked to the JSON from state.
{
“sections”: [
{
“id”: “section-1”,
“name”: “Hero Section”,
“containers”: [
{
“id”: “container-1”,
“columns”: [
{
“id”: “column-1”,
“blocks”: [
{
“id”: “block-1”,
“name”: “Block 1”
}
]
},
{
“id”: “column-2”,
“blocks”: [
{
“id”: “block-1”,
“name”: “Block 1”
}
]
},
{
“id”: “column-3”,
“blocks”: [
{
“id”: “block-1”,
“name”: “Block 1”
}
]
}
]
},
{
“id”: “container-2”,
“columns”: [
{
“id”: “column-1”,
“blocks”: [
{
“id”: “block-1”,
“name”: “Block 1”
},
{
“id”: “block-2”,
“name”: “Block 2”
},
{
“id”: “block-3”,
“name”: “Block 3”
},
{
“id”: “block-4”,
“name”: “Block 4”
}
]
},
{
“id”: “column-2”,
“blocks”: [
{
“id”: “block-1”,
“name”: “Block 1”
},
{
“id”: “block-2”,
“name”: “Block 2”
}
]
}
]
}
]
}
]
}
I am trying to add a drag and drop functionality where I can move any block from one column to another column along with the block data. Block data is blockItem and has index as blockIndex. I am looking for functionality where i can drag and drop the block within a column as well as to a different column. Please note as it is linked to the JSON data. Data movement is required to make the changes in the UI.
What have you tried so far? (please link relevant docs and other forum posts)
I have tried to use on Drag Start and on Drop function but I am unable to do so. I have made each block draggable.
Relevant links:
- My project: Plasmic