style body min height 300px box sizing content box padding 0 margin 0 container width 100 border 1px solid blue item border 1px solid gray display flex item hover background color rgba 100 100 100 0 1 item active background color rgba 100 10 10 0 3 item selected background color rgba 10 100 10 0 3 group display inline block min width 100px border 1px solid red vertical align top number group min width 40px title group min width 100px status group min width 70px words group min width 50px type group min width 50px content group flex grow 1 contenttextarea background color transparent outline none resize none border 0 margin 0 padding 0 font family Times New Roman font size 16px line height 16px padding 1px 0px 0px 0px width 100 height 16px overflow hidden white space nowrap style div id container div script let container document getElementById container let testitem div class item span class group number No span span class group title Title span span class group status Status span span class group words Words span span class group type Type span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Content textarea span div let levels function createItem level inno title for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let no Object values levels join let indent span style min width 15px display inline block span repeat level let cont div class item onclick selectitem this span class group number no span span class group title indent title span span class group status Status span span class group words Words span span class group type Type span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Content textarea span div return cont container innerHTML container innerHTML testitem container innerHTML createItem 0 1 Introduction container innerHTML createItem 1 1 1 Motivation container innerHTML createItem 2 1 1 1 Problem container innerHTML createItem 2 1 1 2 Other container innerHTML createItem 1 1 2 Tasks container innerHTML createItem 0 2 Background container innerHTML createItem 2 2 1 1 Timeline container innerHTML createItem 1 2 1 Cats function selectitem item let items document getElementsByClassName item items forEach el el classList remove selected item classList add selected script br br style body min height 300px box sizing content box padding 0 margin 0 container width 100 border 1px solid blue item border 1px solid gray display flex item hover background color rgba 100 100 100 0 1 item active background color rgba 100 10 10 0 3 item selected background color rgba 10 100 10 0 3 group display inline block min width 100px border 1px solid red vertical align top number group min width 40px title group min width 100px status group min width 70px words group min width 50px type group min width 50px content group flex grow 1 contenttextarea background color transparent outline none resize none border 0 margin 0 padding 0 font family Times New Roman font size 16px line height 16px padding 1px 0px 0px 0px width 100 height 16px overflow hidden white space nowrap style div id container div script let container document getElementById container let testitem div class item span class group number No span span class group title Title span span class group status Status span span class group words Words span span class group type Type span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Content textarea span div let levels function updateOrder levels let items document getElementsByClassName item items items items forEach el i if i 0 return header let level el getAttribute depth level parseInt level for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let indent span style min width 15px display inline block span repeat level el children 1 children 0 innerHTML indent let no Object values levels join el children 0 innerHTML no function createItem level title level parseInt level for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let no Object values levels join let indent span style min width 15px display inline block span repeat level let cont div class item onclick selectitem this depth level span class group number no span span class group title span indent span span title span span span class group status Status span span class group words Words span span class group type Type span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Content textarea span div return cont function selectitem item let items document getElementsByClassName item items forEach el el classList remove selected item classList add selected let data items depth 0 title Introduction depth 1 title Motivation depth 2 title Problem depth 2 title Other depth 1 title Tasks depth 0 title Background depth 2 title Timeline depth 2 title Cats function loaddata d levels container innerHTML container innerHTML testitem HEADER let items d items items forEach ii container innerHTML createItem ii depth ii title function savedata let savedata savedata items let items document getElementsByClassName item items items items forEach el i if i 0 return savedata items push depth el getAttribute depth title el children 1 innerText return savedata loaddata data let res savedata console log data res loaddata res function savefile let curdata savedata let jsonTXT JSON stringify curdata let a document createElement a let file new Blob jsonTXT type text plain a href URL createObjectURL file a download mygriddata json a click URL revokeObjectURL a href function loadfile let inputdiv document createElement input inputdiv type file inputdiv accept json json inputdiv onchange function const fileList this files let reader new FileReader no arguments reader readAsText this files 0 reader onload function let indata JSON parse reader result loaddata indata inputdiv click function horizontal dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let depth parseInt sel getAttribute depth depth dir if depth 0 depth 0 sel setAttribute depth depth updateOrder let res savedata loaddata res function vertical dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let selParent sel parentElement if dir 0 sel previousElementSibling if dir 0 selParent children indexOf sel 1 selParent insertBefore sel sel previousElementSibling else if dir 0 sel nextElementSibling selParent insertBefore sel nextElementSibling sel updateOrder let res savedata loaddata res console log ready script button onclick savefile Save button button onclick loadfile Load button button onclick horizontal 1 Left button button onclick horizontal 1 Right button button onclick vertical 1 Up button button onclick vertical 1 Down button br br
ms items forEach el i if i 0 return header let level el getAttribute depth level parseInt level for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let indent span style min width 15px display inline block span repeat level el children 1 children 0 innerHTML indent let no Object values levels join el children 0 innerHTML no function createItem level title level parseInt level for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let no Object values levels join let indent span style min width 15px display inline block span repeat level let cont div class item onclick selectitem this depth level span class group number no span span class group title span indent span span title span span span class group status Status span span class group words Words span span class group type Type span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Content textarea span div return cont function selectitem item let items document getElementsByClassName item items forEach el el classList remove selected item classList add selected let data items depth 0 title Introduction depth 1 title Motivation depth 2 title Problem depth 2 title Other depth 1 title Tasks depth 0 title Background depth 2 title Timeline depth 2 title Cats function loaddata d levels container innerHTML container innerHTML testitem HEADER let items d items items forEach ii container innerHTML createItem ii depth ii title function savedata let savedata savedata items let items document getElementsByClassName item items items items forEach el i if i 0 return savedata items push depth el getAttribute depth title el children 1 innerText return savedata loaddata data let res savedata console log data res loaddata res function savefile let curdata savedata let jsonTXT JSON stringify curdata let a document createElement a let file new Blob jsonTXT type text plain a href URL createObjectURL file a download mygriddata json a click URL revokeObjectURL a href function loadfile let inputdiv document createElement input inputdiv type file inputdiv accept json json inputdiv onchange function const fileList this files let reader new FileReader no arguments reader readAsText this files 0 reader onload function let indata JSON parse reader result loaddata indata inputdiv click function horizontal dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let depth parseInt sel getAttribute depth depth dir if depth 0 depth 0 sel setAttribute depth depth updateOrder let res savedata loaddata res function vertical dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let selParent sel parentElement if dir 0 sel previousElementSibling if dir 0 selParent children indexOf sel 1 selParent insertBefore sel sel previousElementSibling else if dir 0 sel nextElementSibling selParent insertBefore sel nextElementSibling sel updateOrder let res savedata loaddata res console log ready script button onclick savefile Save button button onclick loadfile Load button button onclick horizontal 1 Left button button onclick horizontal 1 Right button button onclick vertical 1 Up button button onclick vertical 1 Down button br br