# Drag and drop nodes from a sidebar
**URL:** https://discourse.nodered.org/t/drag-and-drop-nodes-from-a-sidebar/7217
**Category:** General
**Created:** [24 January 2019 15:51 UTC](https://discourse.nodered.org/t/drag-and-drop-nodes-from-a-sidebar/7217 "2019-01-24T15:51:14Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@malinthasa](https://discourse.nodered.org/u/malinthasa)
#### Post date: [24 January 2019 15:51 UTC](https://discourse.nodered.org/t/drag-and-drop-nodes-from-a-sidebar/7217/1 "2019-01-24T15:51:15Z")
Hi,
I am developing a side bar which suggest nodes for the user to proceed flow development. To improve the user experience, I am thinking to add node drag and drop capability(not exactly drag and drop) to the side bar. Once user select one node (node name) click a button that node should be displayed in the development area of current flow.
As I assume, node-red is keeping the description of the current flow (which is not yet updated in the flow description which is exposed in`/flows` API endpoint) in some in-memory location until the deployment. Is there anyway to update this kind of in-memory object (if exist any API) to add a node to the current flow development area. Appreciate your insights how to do this.
Regards,
Malintha
---
### Author:  [@ghayne](https://discourse.nodered.org/u/ghayne)
#### Post date: [24 January 2019 16:33 UTC](https://discourse.nodered.org/t/drag-and-drop-nodes-from-a-sidebar/7217/2 "2019-01-24T16:33:29Z")
What advantage will that have over the current system?
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [24 January 2019 20:48 UTC](https://discourse.nodered.org/t/drag-and-drop-nodes-from-a-sidebar/7217/3 "2019-01-24T20:48:14Z")
Hi @malinthasa
we haven't published any apis at this low level within the editor. The follow code is how you'd do it today. I don't see why any of this would change in the future - but something to watch.
```auto
// Get the Flow JSON you want to import
// - this is for you to generate however you choose
var nodeDefinition = [{"id":RED.nodes.id(),"type":"function","z":"538e49f9.1c9f18","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":170,"y":240,"wires":[[]]}]
// Import it
var importResult = RED.nodes.import(nodeDefinition);
// importResult is an array of arrays:
// [new_nodes,new_links,new_workspaces,new_subflows,missingWorkspace]
// If you're only importing nodes, then importResult[0] is the array
// you care about.
// Next, add an event to the history stack so it can be undone.
RED.history.push({t:"add",nodes:[importResult[0].map(function(n) { return n.id})],dirty: RED.nodes.dirty()});
// Mark the workspace as dirty
RED.nodes.dirty(true);
// Trigger a full redraw of the canvas so the new node appears
RED.view.redraw(true);
```