style body min height 400px box sizing border box container position relative border 1px solid red padding 10px height 90vh display flex columns border 1px solid black height 100 left width 120px right flex 1 columns item background color rgba 100 100 200 0 3 columns item hover background color rgba 150 100 200 0 3 columns selected background color rgba 200 100 200 0 3 style div id container div class columns left div button onclick changeitem add button button onclick changeitem delete button button onclick moveitem l larr button button onclick moveitem r rarr button button onclick moveitem u uarr button button onclick moveitem d darr button div br div id items div class item span span span Item0 span div div class item span span span Item1 span div div class item span span span Item2 span div div class item span span span Item3 span div div div div class columns right textarea id editarea style width 100 height 100 outline 0 border 0 resize none textarea div div script let selectedItem null function selectItem e let items document getElementsByClassName item items items get old selectedItem and store contents let oldItem items filter g return g classList contains selected if oldItem length 0 oldItem 0 txt document getElementById editarea value for let i 0 i items length i if items i classList contains selected items i txt document getElementById editarea value items forEach n n classList remove selected e classList add selected selectedItem e document getElementById editarea value e txt let items document getElementsByClassName item items items items forEach e e children 1 contentEditable true e children 1 style outline 0 e depth 0 e onclick items forEach n n classList remove selected e classList add selected selectedItem e changeitem add changeitem add changeitem add changeitem add const div1 document getElementById div1 const div2 document getElementById div2 const div3 document getElementById div3 div2 after div1 div2 before div3 function moveitem d let index Array prototype indexOf call selectedItem parentNode children selectedItem let numitems selectedItem parentNode children length console log index index let parent selectedItem parentElement if d u index 0 parent insertBefore selectedItem parent children index 1 if d d index numitems 1 parent insertBefore parent children index 1 selectedItem if d r selectedItem depth 1 selectedItem children 0 innerHTML repeat selectedItem depth if d l selectedItem depth 1 selectedItem children 0 innerHTML repeat selectedItem depth if selectedItem depth 0 selectedItem children 1 style fontWeight 900 else selectedItem children 1 style fontWeight 400 if selectedItem depth 1 selectedItem children 1 style fontSize 90 if selectedItem depth 2 selectedItem children 1 style fontSize 80 if selectedItem depth 3 selectedItem children 1 style fontSize 70 function changeitem e if e delete selectedItem remove if e add const genRanHex size Array size map Math floor Math random 16 toString 16 join let newitem document createElement div document getElementById items appendChild newitem newitem appendChild document createElement span newitem appendChild document createElement span newitem depth 0 newitem txt empty newitem uid genRanHex 16 newitem className item newitem children 1 innerHTML item newitem children 1 contentEditable true newitem children 1 style outline 0 newitem onclick selectItem newitem script
e classList add selected selectedItem e changeitem add changeitem add changeitem add changeitem add const div1 document getElementById div1 const div2 document getElementById div2 const div3 document getElementById div3 div2 after div1 div2 before div3 function moveitem d let index Array prototype indexOf call selectedItem parentNode children selectedItem let numitems selectedItem parentNode children length console log index index let parent selectedItem parentElement if d u index 0 parent insertBefore selectedItem parent children index 1 if d d index numitems 1 parent insertBefore parent children index 1 selectedItem if d r selectedItem depth 1 selectedItem children 0 innerHTML repeat selectedItem depth if d l selectedItem depth 1 selectedItem children 0 innerHTML repeat selectedItem depth if selectedItem depth 0 selectedItem children 1 style fontWeight 900 else selectedItem children 1 style fontWeight 400 if selectedItem depth 1 selectedItem children 1 style fontSize 90 if selectedItem depth 2 selectedItem children 1 style fontSize 80 if selectedItem depth 3 selectedItem children 1 style fontSize 70 function changeitem e if e delete selectedItem remove if e add const genRanHex size Array size map Math floor Math random 16 toString 16 join let newitem document createElement div document getElementById items appendChild newitem newitem appendChild document createElement span newitem appendChild document createElement span newitem depth 0 newitem txt empty newitem uid genRanHex 16 newitem className item newitem children 1 innerHTML item newitem children 1 contentEditable true newitem children 1 style outline 0 newitem onclick selectItem newitem script