# Html drag & drop - template node - feedback **URL:** https://discourse.nodered.org/t/html-drag-drop-template-node-feedback/19043 **Category:** General **Created:** [11 December 2019 20:51 UTC](https://discourse.nodered.org/t/html-drag-drop-template-node-feedback/19043 "2019-12-11T20:51:47Z") **Posts on this page:** 4 **Page:** 1
### Author: ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ) #### Post date: [11 December 2019 20:51 UTC](https://discourse.nodered.org/t/html-drag-drop-template-node-feedback/19043/1 "2019-12-11T20:51:47Z")
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! ```auto [{"id":"26a534f9.faa184","type":"ui_template","z":"b0b28f06.30d62","group":"a354b26b.425e78","name":"typewriter","order":20,"width":"20","height":"10","format":"\n\n\n\n\n\n\nNaamloos document\n\n\n\n\n\n\n
\n See more examples at https://codepen.io/crouchingtigerhiddenadam/pens/public/\n
\n\n\n\n\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}] ``` ---
### Author: ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ) #### Post date: [12 December 2019 07:56 UTC](https://discourse.nodered.org/t/html-drag-drop-template-node-feedback/19043/2 "2019-12-12T07:56:10Z")
I have found m ore info on this page But no idea were to start or were to put wich code ☹ > **[Lightweight JQuery Plugin For HTML5 Sortable Lists](https://taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-lists)** > > We just added sortable slides to \[presentations in Taxi\](https://taximeeting.com). Dozens of methods litter the internet – JQuery UI Sortable, for example, is perhaps the most popular – to help... ---
### Author: ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ) #### Post date: [12 December 2019 08:52 UTC](https://discourse.nodered.org/t/html-drag-drop-template-node-feedback/19043/3 "2019-12-12T08:52:25Z")
With a request it returns the values in original order and not in the new order. ```auto [{"id":"75194ede.1b0558","type":"inject","z":"b0b28f06.30d62","name":"make request","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":"","x":190,"y":720,"wires":[["91123439.77dd78"]]},{"id":"91123439.77dd78","type":"http request","z":"b0b28f06.30d62","name":"","method":"GET","ret":"txt","paytoqs":false,"url":"http://127.0.0.1:1880/hello","tls":"","persist":false,"proxy":"","authType":"","x":354.5,"y":720,"wires":[["309a8cbc.5a2624"]]},{"id":"cc5a7d99.109d3","type":"debug","z":"b0b28f06.30d62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":790,"y":720,"wires":[]},{"id":"309a8cbc.5a2624","type":"html","z":"b0b28f06.30d62","name":"","property":"","outproperty":"","tag":"li","ret":"html","as":"single","x":530,"y":720,"wires":[["cc5a7d99.109d3"]]},{"id":"de1a89e5.aef64","type":"http in","z":"b0b28f06.30d62","name":"","url":"/hello","method":"get","upload":false,"swaggerDoc":"","x":240,"y":540,"wires":[["8237bd54.046578"]]},{"id":"8237bd54.046578","type":"template","z":"b0b28f06.30d62","name":"page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n\n\n\n\nNaamloos document\n\n\n\n\n\n\n
\n See more examples at https://codepen.io/crouchingtigerhiddenadam/pens/public/\n
\n\n\n\n\n","output":"str","x":430,"y":540,"wires":[["b2bd2dc9.1e0a2","327162ef.919aa6"]]},{"id":"b2bd2dc9.1e0a2","type":"http response","z":"b0b28f06.30d62","name":"","statusCode":"","headers":{},"x":570,"y":540,"wires":[]},{"id":"327162ef.919aa6","type":"debug","z":"b0b28f06.30d62","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":590,"y":620,"wires":[]}] ``` ---
### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay) #### Post date: [12 December 2019 17:53 UTC](https://discourse.nodered.org/t/html-drag-drop-template-node-feedback/19043/4 "2019-12-12T17:53:13Z")
Indeed - the actual html of the page hasn't changed - just the in-browser memory version that you are looking at has changed. You would need to post that back to the back end and update it. You would need to use the dragend event to then re-read the in-memory array and output that back, via a websocket or similar.