{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/drag-and-drop/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Drag & Drop is concerned with moving data around an application, or between applications, using the operating system drag and drop support. When using drag and drop, data is moved or copied around using MIME types in a way similar to using the clipboard."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Native drag and drop is typically used for moving data between applications, eg moving a URL from an email into a web browser to open the URL, or moving a file from a file explorer application to a text editor application. Native drag and drop is not typically used for operating on data inside and application. Native drag and drop is similar to clipboard functionality, eg data must be represented as MIME types and objects cannot be passed by reference (the data must be converted to a MIME type and copied)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section outlines how the grid fits in with native operating system drag and drop. It is assumed the reader is familiar with how drag and drop works. If not, refer to one of the following introductions:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.w3schools.com/html/html5_draganddrop.asp"},"children":[{"type":"text","value":"W3C Schools"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API"},"children":[{"type":"text","value":"MDN Wed Docs"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid implements it's own drag and drop separate to the operating system drag and drop.\nIt is used internally by the grid for\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/row-dragging/"},"children":[{"type":"text","value":"Row Dragging"}]},{"type":"text","value":" (for reordering rows) and for column dragging\n(e.g. re-ordering columns or moving columns in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/tool-panel-columns/"},"children":[{"type":"text","value":"Column Tool Panel"}]},{"type":"text","value":").\nThe grid uses it's own implementation in these instances as it needs finer control over the data\nthan native browser drag & drop supports. For example, the native d&d does not provide\naccess to the dragged item until after the drag operation is complete."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"enable-drag-source","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enable-drag-source","ariaLabel":"enable drag source permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Enable Drag Source"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To allow dragging from the grid, set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dndSource=true"}]},{"type":"text","value":" on one of the columns.\nThis will result in the column having a drag handle displayed. When the dragging starts, the grid\nwill by default create a JSON representation of the data and set this as MIME types "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"application/json"}]},{"type":"text","value":" and also "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"text/plain"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"row dragging","names":"[\"dndSource\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The first column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dndSource=true"}]},{"type":"text","value":", so staring a mouse drag on a cell in the first column will start a drag operation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the data is dragged to the drop zone, the drop zone will display the received JSON. This is because the drop zone is programmed to accept "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"application/json"}]},{"type":"text","value":" MIME types."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"You can also drag to other applications outside of the browser. For example, some text editors (eg Sublime Text) or word processors (eg Microsoft Word) will accept the drag based on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"text/plain"}]},{"type":"text","value":" MIME type. You can test this by dragging a cell to e.g. Microsoft Word."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Simple","name":"simple","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"dragging-between-grids","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#dragging-between-grids","ariaLabel":"dragging between grids permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Dragging Between Grids"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to drag rows between two instances of AG Grid. The drag is done exactly like the simple case described above. The drop is done by the example."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows can be dragged from one grid to the other grid. When the row is received, it is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" removed from the first grid. This is the choice of the example. The example could equally have removed from the other grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If the row is already present in the grid, it will not be added twice. Again this is the choice of the example."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows can be removed from both grids by dragging the row to the 'Trash' drop zone."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"New rows can be created by dragging out from red, green and blue 'Create' draggable areas."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Two Grids","name":"two-grids","type":"mixed","options":"{ \"extras\": [\"fontawesome\"] }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that there is no specific drop zone logic in the grid. This was done on purpose after analysis."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On initial analysis consideration was given to exposing callbacks or firing events in the grid for the drop zone relevant events e.g. ondragenter, on dragexit etc. However this did not add any additional value given that the developer can easily add such event listeners to the grid div directly, and that the grid would be simply exposing the underlying events / callbacks rather than doing any processing itself."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Given the grid was not adding any value, providing such callbacks would just be adding a layer of useless logic."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"custom-drag-data","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-drag-data","ariaLabel":"custom drag data permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Custom Drag Data"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible that a JSON representation of the data is not what is required as the drag data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To provide alternative drag data, use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dndSourceOnRowDrag"}]},{"type":"text","value":" callback on the column definition. This allows specific processing by the application for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowdrag"}]},{"type":"text","value":" even rather than the default grid behaviour."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"row dragging","names":"[\"dndSourceOnRowDrag\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below is identical to the first example on this page with the addition of custom drag data. Note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The draggable column also has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dndSourceOnRowDrag"}]},{"type":"text","value":" set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"onRowDrag"}]},{"type":"text","value":" method provides an alternative piece of drag data to be set into the drag event."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The data dragged also includes row state such as whether the rows is selected or not."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Drag Data","name":"custom-drag-data","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"custom-drag-component","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-drag-component","ariaLabel":"custom drag component permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Custom Drag Component"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Drag and drop is a complex application-level requirement. As such, a component (the grid) can't propose a drag and drop solution that is appropriate for all applications. For this reason, if the application has drag and drop requirements, you would likely want to implement a custom "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderer"}]},{"type":"text","value":" specifically for your needs."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows a custom drag and drop cell renderer. Note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The dragging works similar to before, rows are dragged from the left grid to the right drop zone."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid does not provide the dragging. Instead, the example's cell renderer implements the drag logic."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Drag Component","name":"custom-drag-comp","type":"generated","options":"{  }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Drag & Drop","version":null,"enterprise":null,"description":null},"headings":[{"id":"enable-drag-source","depth":2,"value":"Enable Drag Source"},{"id":"dragging-between-grids","depth":2,"value":"Dragging Between Grids"},{"id":"custom-drag-data","depth":2,"value":"Custom Drag Data"},{"id":"custom-drag-component","depth":2,"value":"Custom Drag Component"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"javascript","srcPath":"/drag-and-drop","pageName":"drag-and-drop"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}