Dragging rows in Perspective Table

Ignition
8

ah it was easy, ignition puts its row id in a data atrribute so it was easy to read.

@jasoncoope
dragtable.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

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

	#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

4 Likes