# Dragging rows in Perspective Table

**URL:** <https://forum.inductiveautomation.com/t/dragging-rows-in-perspective-table/68922>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 23, 2023, 5:01pm UTC](https://forum.inductiveautomation.com/t/dragging-rows-in-perspective-table/68922 "2023-01-23T17:01:05Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 26, 2023, 10:30am UTC](https://forum.inductiveautomation.com/t/dragging-rows-in-perspective-table/68922/8 "2023-01-26T10:30:51Z")

</div>

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 dont mind  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/90dfe89240383875487f49601c320acd76ed1493.png)

**update:** a fix for unvirtualised tables and tables with multple pages... using the js mutation observer:

```auto
	#make the propName the key to write too in the view.custom 
	propName = "rowDroppedData"
	code = """<img style='display:none' src='/favicon.ico' onload=\"
		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 .t.ia_table > .tb');
		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;
					});		
				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
	

```

(also just gona link this to my other jsinjects post

> [@Javascript inject in Perspective... have fun](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/5):
>
> Gonna try to keep this topic updated with all my cool injectings stuck_out_tongue Version 8.1.22 svg clicker wink

---

_[View the full topic](https://forum.inductiveautomation.com/t/dragging-rows-in-perspective-table/68922)._