# Drag and drop data in Perspective **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 11, 2023, 12:17pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292 "2023-04-11T12:17:03Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Nate\_X](https://avatars.discourse-cdn.com/v4/letter/n/54ee81/32.png) [@Nate\_X](https://forum.inductiveautomation.com/u/Nate_X)\ **Post date:** [April 11, 2023, 12:17pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/1 "2023-04-11T12:17:03Z")
I want to give my end user the capability to drag data out of a container and into a different container. As an example, I have a list of tasks in container A and I want to give the end user the ability to drag individual tasks from container A into containers B or C. I'd then update a database to reflect what container the task is in. Any advice on how to approach this? ---
**Author:** ![kyler.kamyszek](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@kyler.kamyszek](https://forum.inductiveautomation.com/u/kyler.kamyszek)\ **Post date:** [April 11, 2023, 1:34pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/2 "2023-04-11T13:34:29Z")
I used a different approach from drag and drop. Partly because of some touch screen PCs we have that don't really have a nice drag/drop feature or multi touch gestures. I used tables and multiple selection option to give this feel. I select what rows that I want to move, then use some arrow buttons near the tables to move them to other 'containers'. I then use scripting in the background to update my databases accordingly. ---
**Author:** ![Nate\_X](https://avatars.discourse-cdn.com/v4/letter/n/54ee81/32.png) [@Nate\_X](https://forum.inductiveautomation.com/u/Nate_X)\ **Post date:** [April 11, 2023, 4:13pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/3 "2023-04-11T16:13:16Z")
Thanks for that. Makes sense. It would be ideal to drag and drop, but I will look into this option as well. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 11, 2023, 4:48pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/4 "2023-04-11T16:48:26Z")
There's currently no built-in components which allow for drag-and-drop. I too recommend you provide a way to select options and then use some sort of button-based interaction paradigm to use the selected options in some manner while removing them from pool 'A' and placing them in pool 'B' via scripting. A Table would work when there are many options, but if you just expect a few to ever be selected at one time you could use a multi-select Dropdown. ---
**Author:** ![craigb](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@craigb](https://forum.inductiveautomation.com/u/craigb)\ **Post date:** [April 11, 2023, 5:43pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/5 "2023-04-11T17:43:12Z")
I played around with a couple options, the button is the cleanest as the drag and drop while works its not clear to undersand as its not like the table row drags with the mouse. [https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/057b0b82b766e1dd73a81a45d933d302c7863f74.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/057b0b82b766e1dd73a81a45d933d302c7863f74.mp4) [https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e61a4ca08e7e6d4c0a4d9a7ad1bdb8b0b775beb2.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e61a4ca08e7e6d4c0a4d9a7ad1bdb8b0b775beb2.mp4) ---
**Author:** ![Nate\_X](https://avatars.discourse-cdn.com/v4/letter/n/54ee81/32.png) [@Nate\_X](https://forum.inductiveautomation.com/u/Nate_X)\ **Post date:** [April 11, 2023, 5:59pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/6 "2023-04-11T17:59:47Z")
Thanks for the answer. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 11, 2023, 9:59pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/7 "2023-04-11T21:59:27Z")
@victordcq had a solution for this to allow drag drop. I'll dig up his post > [@Dragging rows in Perspective Table](https://forum.inductiveautomation.com/t/dragging-rows-in-perspective-table/68922/8): > > ah it was easy, ignition puts its row id in a data atrribute so it was easy to read. @jasoncoope[dragtable.zip](https://forum.inductiveautomation.com/uploads/short-url/AvXF36eUYUY52tcHnheVhENIotA.zip) (27.7 KB) copy the markdown and add in a custom property on the view you probably will have to adapt the onchange script in the view.custom element to your needs. sometimes the columns seem to move around too when you drag a row... not sure why or how to prevent that... probably clashing with the other drag events on the table xd edit : ahah, turn this off too, well unless you d… > [@Perspective Mouse Click & Drag](https://forum.inductiveautomation.com/t/perspective-mouse-click-drag/28583/27): > > Soooo.... i was playing around a bit and i found something to inject js in perspective. I know i know crazy_face Its kinda terrible and requires some knowlegde about the perspective react props... But this seems like it would fit here. A little demo, not to complex for drag and drop. Im writing it to a sessionprop, seems to be easier than trying to find the view props. [dndjsinject.zip](https://forum.inductiveautomation.com/uploads/short-url/k9uW6F1ZYMhCSZY1l161wy5UWue.zip) (7.5 KB) @nader.chinichian ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 12, 2023, 6:45am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/8 "2023-04-12T06:45:31Z")
This one is something like that too, but i havent had the time to finish it yet. (combining full time work and evening school is quite draining) > [@Perspective Scheduler - Drag and Drop From Table](https://forum.inductiveautomation.com/t/perspective-scheduler-drag-and-drop-from-table/71853/7): > > Hmm not all the cells are loaded on page load, i'll need to modify it to apply the on drop events on dom changes. But i made a proof on concept that is working so far, ill get back to it when i have some time ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 20, 2023, 6:57am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/9 "2023-04-20T06:57:30Z")
got it updated > [@Perspective Scheduler - Drag and Drop From Table](https://forum.inductiveautomation.com/t/perspective-scheduler-drag-and-drop-from-table/71853/12): > > yes you can setup a mutation observer that triggers on domchanges ive done something similar here: i'll fix up the script i have in a bit edit: here you go! a table , a schedule and the markdown are in here, with the dragdrop in de markdown and an (example of) AddEvent in de schedule. [tabledropschedule.zip](https://forum.inductiveautomation.com/uploads/short-url/vraW8MysI6UtTLmks7yMcZEDSM8.zip) (12.6 KB) ---
**Author:** ![nicoli.liedtke](https://avatars.discourse-cdn.com/v4/letter/n/ee59a6/32.png) [@nicoli.liedtke](https://forum.inductiveautomation.com/u/nicoli.liedtke)\ **Post date:** [April 21, 2023, 2:06am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/10 "2023-04-21T02:06:24Z")
Alternatively you could look at this Ignition exchange resource for inspiration [DMC Drag and Drop Example](https://www.inductiveautomation.com/exchange/2368/overview). I could imagine also being able to get creative with some Perspective Messaging when clicking onto one container and releasing onto another container. But how the messaging could work depends greatly on how the views are configured. The drag and drop in the exchange resource leverages the view canvas for this drag and drop behavior. ---
**Author:** ![Shaun\_Bennett](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Shaun\_Bennett](https://forum.inductiveautomation.com/u/Shaun_Bennett)\ **Post date:** [April 26, 2023, 9:25pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/11 "2023-04-26T21:25:26Z")
@victordcq The table row drag and drop works very well out of the box, but I've managed to break it and I haven't figured out how it's breaking. If you use the pager and switch to page 2 it stops working. I see a similar phenomenon with my project. If the page loads with data (works great in the IDE, not so much in the browser) I can move rows. If the data changes in any way it breaks and stops working. I'm sure there's likely a simple fix, but I haven't been able to figure it out yet. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [May 2, 2023, 6:07am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/12 "2023-05-02T06:07:34Z")
which one are you using? i have a couple of versions running around... ---
**Author:** ![Shaun\_Bennett](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Shaun\_Bennett](https://forum.inductiveautomation.com/u/Shaun_Bennett)\ **Post date:** [May 2, 2023, 12:51pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/13 "2023-05-02T12:51:54Z")
> [@victordcq](#): > > you using? i have a couple of versions running around... Hmmm, good question. It's from 2023. This is from the resource.json file. _"timestamp": "2023-01-26T10:29:57Z"_ _"lastModificationSignature": "83569c9745b13dbed670550429074f9f96d8c6b454781b2aadb0024e8bf7dad0"_ ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [May 2, 2023, 2:14pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/14 "2023-05-02T14:14:11Z")
i mean which post did you get the file from? ---
**Author:** ![Shaun\_Bennett](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Shaun\_Bennett](https://forum.inductiveautomation.com/u/Shaun_Bennett)\ **Post date:** [May 2, 2023, 6:33pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/15 "2023-05-02T18:33:38Z")
It's a couple rows up on this thread ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f82d7977f85e62cab09bfeb15c46fe230e3d5fd0.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [May 3, 2023, 8:46am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/16 "2023-05-03T08:46:01Z")
ah yes this does not use the mutation observer yet this should fix that, replace the markdown binding script with this ```auto #make the propName the key to write too in the view.custom propName = "rowDroppedData" code = """ view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; function ondrop(ev) { ev.preventDefault(); const draggedId = ev.dataTransfer.getData('text'); const droppedId = this.getAttribute('data-row-id'); view.custom.write('"""+propName+"""',{'draggedId':draggedId,'droppedId':droppedId}); }; function ondragstart(ev){ ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-id')); }; function ondragover(ev){ ev.preventDefault(); }; const callbackTable = (mutationList, observer) => { document.querySelectorAll('.tr-group.ia_table__rowGroup').forEach(e => { e.setAttribute('draggable',true); e.ondragstart = ondragstart; e.ondragover = ondragover; e.ondrop = ondrop; }); }; const observerTable = new MutationObserver(callbackTable); const tables = document.querySelectorAll('.ia_tableComponent .tb.ia_table__body'); tables.forEach(table => observerTable.observe(table, { attributes: false, childList: true, subtree: true })); document.querySelectorAll('.tr-group.ia_table__rowGroup').forEach(e => { e.setAttribute('draggable',true); e.ondragstart = ondragstart; e.ondragover = ondragover; e.ondrop = ondrop; }); \">""".replace("\n", "").replace("\t", "") return code ``` ---
**Author:** ![Shaun\_Bennett](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Shaun\_Bennett](https://forum.inductiveautomation.com/u/Shaun_Bennett)\ **Post date:** [May 3, 2023, 1:33pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/17 "2023-05-03T13:33:40Z")
> [@victordcq](#): > > ```auto > #make the propName the key to write too in the view.custom > propName = "rowDroppedData" > code = """ const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; > function ondrop(ev) { > ev.preventDefault(); > const draggedId = ev.dataTransfer.getData('text'); > const droppedId = this.getAttribute('data-row-id'); > view.custom.write('"""+propName+"""',{'draggedId':draggedId,'droppedId':droppedId}); > }; > function ondragstart(ev){ > > ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-id')); > }; > function ondragover(ev){ > ev.preventDefault(); > }; > > const callbackTable = (mutationList, observer) => { > document.querySelectorAll('.tr-group.ia_table__rowGroup').forEach(e => { > e.setAttribute('draggable',true); > e.ondragstart = ondragstart; > e.ondragover = ondragover; > e.ondrop = ondrop; > }); > }; > > > > const observerTable = new MutationObserver(callbackTable); > const tables = document.querySelectorAll('.ia_tableComponent .tb.ia_table__body'); > tables.forEach(table => observerTable.observe(table, { attributes: false, childList: true, subtree: true })); > document.querySelectorAll('.tr-group.ia_table__rowGroup').forEach(e => { > e.setAttribute('draggable',true); > e.ondragstart = ondragstart; > e.ondragover = ondragover; > e.ondrop = ondrop; > }); > > \">""".replace("\n", "").replace("\t", "") > return code > > ``` that's a beautiful thing ---
**Author:** ![Markus\_Oosthuizen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/markus_oosthuizen/32/81030_2.png) [@Markus\_Oosthuizen](https://forum.inductiveautomation.com/u/Markus_Oosthuizen)\ **Post date:** [March 2, 2026, 2:36pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-data-in-perspective/72292/18 "2026-03-02T14:36:46Z")
Hi, maybe you want to check out this module > **[Ignition Third-Party Module Showcase](https://inductiveautomation.com/moduleshowcase/module/lidt-technologies-perspective-drag-and-drop)** > > Easily extend Ignition's core functionality with Third-Party Modules. The Module Showcase is a great place to find a solution that best meets your needs. Demo video: > **[Drag & Drop Module for Ignition Perspective Released | Markus Oosthuizen...](https://www.linkedin.com/posts/markus-oosthuizen-85652b138_ignition-scada-hmi-ugcPost-7428167999129481216-Omjh?utm_source=share&utm_medium=member_desktop&rcm=ACoAACGJrQIBs9ur7wPCJajsaMhvxQDOUsFGFok)** > > Now on the Ignition Module Showcase! > LIDT Technologies have released a Drag & Drop Module for Inductive Automation's Ignition Perspective platform, built for creating dynamic, operator-configurable HMI interfaces. > The module adds three components to...