with the html example with the template node like below a have a drag and drop screen to sort steps.
it works 
but nice that i can drag and drop data nut i really have no idea were to start to get data out of it to store the sort order.
Any one an idea how i can start with that?
Thanks!
[{"id":"26a534f9.faa184","type":"ui_template","z":"b0b28f06.30d62","group":"a354b26b.425e78","name":"typewriter","order":20,"width":"20","height":"10","format":"<!doctype html>\n<html>\n<head>\n\n<style>\n\t\tbody { \n\t\t\t\tfont: 16px Arial, Helvetica, sans-serif \n\t\t}\n\t\t\n\t\tli { \n\t\t\t\tcursor: pointer; user-select: none \n\t\t}\n\t\t\n\t\t.more { border-top: 1px dotted rgb(196, 196, 196); \n\t\t\t\tfont-size: 12px; \n\t\t\t\tpadding-top: 10px \n\t\t}\n\t\t.more, .more a { \n\t\t\t\t\tcolor: rgb(96, 96, 96) \n\t\t\t\t\t}\n</style>\n\n<meta charset=\"UTF-8\">\n<title>Naamloos document</title>\n<script>\nvar selected\n\nfunction dragOver( e ) {\n if ( isBefore( selected, e.target ) ) e.target.parentNode.insertBefore( selected, e.target )\n else e.target.parentNode.insertBefore( selected, e.target.nextSibling )\n}\n\nfunction dragEnd() {\n selected = null\n}\n\nfunction dragStart( e ) {\n e.dataTransfer.effectAllowed = \"move\"\n e.dataTransfer.setData( \"text/plain\", null )\n selected = e.target\n}\n\nfunction isBefore( el1, el2 ) {\n var cur\n if ( el2.parentNode === el1.parentNode ) {\n for ( cur = el1.previousSibling; cur; cur = cur.previousSibling ) {\n if (cur === el2) return true\n }\n } else return false;\n}\n</script>\n</head>\n\n<body>\n\n<ul>\n <li draggable=\"true\" ondragend=\"dragEnd()\" ondragover=\"dragOver(event)\" ondragstart=\"dragStart(event)\">Apples</li>\n <li draggable=\"true\" ondragend=\"dragEnd()\" ondragover=\"dragOver(event)\" ondragstart=\"dragStart(event)\">Oranges</li>\n <li draggable=\"true\" ondragend=\"dragEnd()\" ondragover=\"dragOver(event)\" ondragstart=\"dragStart(event)\">Bananas</li>\n <li draggable=\"true\" ondragend=\"dragEnd()\" ondragover=\"dragOver(event)\" ondragstart=\"dragStart(event)\">Strawberries</li>\n</ul>\n<div class=\"more\">\n See more examples at <a href=\"https://codepen.io/crouchingtigerhiddenadam/pens/public/\" target=\"_top\">https://codepen.io/crouchingtigerhiddenadam/pens/public/</a>\n</div>\n\n\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":520,"y":220,"wires":[["1b6eb63e.14833a"]]},{"id":"56eabd.21629544","type":"inject","z":"b0b28f06.30d62","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":220,"wires":[["26a534f9.faa184"]]},{"id":"1b6eb63e.14833a","type":"debug","z":"b0b28f06.30d62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":710,"y":220,"wires":[]},{"id":"a354b26b.425e78","type":"ui_group","z":"","name":"step sort","tab":"efc72c0c.5fda98","order":1,"disp":false,"width":"20","collapse":false},{"id":"efc72c0c.5fda98","type":"ui_tab","z":"","name":"Step sort","icon":"dashboard","order":23,"disabled":false,"hidden":false}]
