{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde3","type":"Block","tag":"div","classes":[],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcde4","e64c46ff-b6ae-b248-f42f-756c96dfcdfa","58ff690d-e328-a11a-f451-03cb6925b83d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde4","type":"Block","tag":"div","classes":["e0d241c7-d3c0-0d48-d4b5-231c5f5639d5"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcde5","e64c46ff-b6ae-b248-f42f-756c96dfcde7","e64c46ff-b6ae-b248-f42f-756c96dfcded","e64c46ff-b6ae-b248-f42f-756c96dfcdf3","e64c46ff-b6ae-b248-f42f-756c96dfcdf9"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde5","type":"FormBlockLabel","tag":"label","classes":["2657aadb-6326-6737-fabb-4243fa3dff9f"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcde6"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Text-Field-3","id":""},"visibility":{"conditions":[]}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde6","text":true,"v":"Drag n' Drop "},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde7","type":"Block","tag":"div","classes":["e0d241c7-d3c0-0d48-d4b5-231c5f5639d7"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcde8","e64c46ff-b6ae-b248-f42f-756c96dfcde9","e64c46ff-b6ae-b248-f42f-756c96dfcdeb"],"data":{"search":{"exclude":false},"xattr":[{"name":"draggable","value":"true"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde8","type":"HtmlEmbed","tag":"div","classes":["ce1ecafa-2eb8-2358-c2dd-5ddb6c46c763","8f030265-3482-c579-def9-675de7f866cf"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcde9","type":"Block","tag":"div","classes":[],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdea"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-value","value":"true"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdea","text":true,"v":"Option A"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdeb","type":"Block","tag":"div","classes":["34ede506-69a8-3b69-c891-289f3b306d2d"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdec"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdec","text":true,"v":"🟢"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcded","type":"Block","tag":"div","classes":["e0d241c7-d3c0-0d48-d4b5-231c5f5639d7"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdee","e64c46ff-b6ae-b248-f42f-756c96dfcdef","e64c46ff-b6ae-b248-f42f-756c96dfcdf1"],"data":{"search":{"exclude":false},"xattr":[{"name":"draggable","value":"true"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdee","type":"HtmlEmbed","tag":"div","classes":["ce1ecafa-2eb8-2358-c2dd-5ddb6c46c763","8f030265-3482-c579-def9-675de7f866cf"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdef","type":"Block","tag":"div","classes":[],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdf0"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-value","value":"true"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf0","text":true,"v":"Option B"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf1","type":"Block","tag":"div","classes":["34ede506-69a8-3b69-c891-289f3b306d2d"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdf2"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf2","text":true,"v":"🟡"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf3","type":"Block","tag":"div","classes":["e0d241c7-d3c0-0d48-d4b5-231c5f5639d7"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdf4","e64c46ff-b6ae-b248-f42f-756c96dfcdf5","e64c46ff-b6ae-b248-f42f-756c96dfcdf7"],"data":{"search":{"exclude":false},"xattr":[{"name":"draggable","value":"true"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf4","type":"HtmlEmbed","tag":"div","classes":["ce1ecafa-2eb8-2358-c2dd-5ddb6c46c763","8f030265-3482-c579-def9-675de7f866cf"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf5","type":"Block","tag":"div","classes":[],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdf6"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-value","value":"true"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf6","text":true,"v":"Option C"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf7","type":"Block","tag":"div","classes":["34ede506-69a8-3b69-c891-289f3b306d2d"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdf8"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf8","text":true,"v":"🔴"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdf9","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<style>\n.ms-drag-and-drop:hover .ms-button-svg {\n opacity: 100%;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<style>\n.ms-drag-and-drop:hover .ms-button-svg {\n opacity: 100%;\n}\n</style>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdfa","type":"Block","tag":"div","classes":[],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdfb","e64c46ff-b6ae-b248-f42f-756c96dfcdfd","e64c46ff-b6ae-b248-f42f-756c96dfcdfe"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdfb","type":"FormBlockLabel","tag":"label","classes":["2657aadb-6326-6737-fabb-4243fa3dff9f"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdfc"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Field-61","id":""},"visibility":{"conditions":[]}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdfc","text":true,"v":"This input is what gets saved/submitted"},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdfd","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Field-60","data-name":"Field 60","placeholder":"Example Text","type":"text","id":"Field-61","disabled":false,"required":true},"xattr":[{"name":"data-input","value":"drag-order"},{"name":"data-ms-member","value":"drag-order"}],"form":{"name":"Field 60","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdfe","type":"Block","tag":"div","classes":["73f529f2-aa61-4baf-340f-708f676f0c22"],"children":["e64c46ff-b6ae-b248-f42f-756c96dfcdff"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e64c46ff-b6ae-b248-f42f-756c96dfcdff","text":true,"v":"You'll probably want to hide and/or disable it in production. I'll add some HTML that you could use."},{"_id":"58ff690d-e328-a11a-f451-03cb6925b83d","type":"Block","tag":"div","classes":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"children":["58ff690d-e328-a11a-f451-03cb6925b83e","58ff690d-e328-a11a-f451-03cb6925b842"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b83e","type":"Link","tag":"a","classes":["0d41ce05-dcef-7195-d116-e65f5c3982f0"],"children":["58ff690d-e328-a11a-f451-03cb6925b83f","58ff690d-e328-a11a-f451-03cb6925b841"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b83f","type":"Block","tag":"div","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b840"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b840","text":true,"v":"☝️ How this works"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b841","type":"HtmlEmbed","tag":"div","classes":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b842","type":"Block","tag":"div","classes":["d4047300-ace7-5a9f-b875-60fe8e0bbcf5"],"children":["58ff690d-e328-a11a-f451-03cb6925b843","58ff690d-e328-a11a-f451-03cb6925b844","58ff690d-e328-a11a-f451-03cb6925b845","58ff690d-e328-a11a-f451-03cb6925b847","58ff690d-e328-a11a-f451-03cb6925b850","58ff690d-e328-a11a-f451-03cb6925b852","58ff690d-e328-a11a-f451-03cb6925b855","58ff690d-e328-a11a-f451-03cb6925b866","58ff690d-e328-a11a-f451-03cb6925b868","58ff690d-e328-a11a-f451-03cb6925b86b","58ff690d-e328-a11a-f451-03cb6925b86f","58ff690d-e328-a11a-f451-03cb6925b871","58ff690d-e328-a11a-f451-03cb6925b874","58ff690d-e328-a11a-f451-03cb6925b877","58ff690d-e328-a11a-f451-03cb6925b87d","58ff690d-e328-a11a-f451-03cb6925b87f","58ff690d-e328-a11a-f451-03cb6925b882","58ff690d-e328-a11a-f451-03cb6925b8f7","58ff690d-e328-a11a-f451-03cb6925b8f9"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b843","type":"Block","tag":"div","classes":["3b998372-f799-dc18-eb99-4516eebd4411"],"children":[],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b844","type":"Video","tag":"div","classes":["50462ff5-4e00-c0b3-cefd-808f44527568"],"children":[],"data":{"video":{"embed":{"type":"video","url":"https://www.loom.com/share/1ad3bbd64caa4178a995032addbf57f1","title":"Draggable Inputs | Webflow Form UI Kit","meta":{"provider_url":"https://www.loom.com","width":940,"height":705,"html":"<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.loom.com%2Fembed%2F1ad3bbd64caa4178a995032addbf57f1&display_name=Loom&url=https%3A%2F%2Fwww.loom.com%2Fshare%2F1ad3bbd64caa4178a995032addbf57f1&image=https%3A%2F%2Fcdn.loom.com%2Fsessions%2Fthumbnails%2F1ad3bbd64caa4178a995032addbf57f1-00001.gif&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=loom\" scrolling=\"no\" allowfullscreen title=\"Draggable Inputs | Webflow Form UI Kit\"></iframe>","url":"https://www.loom.com/share/1ad3bbd64caa4178a995032addbf57f1","thumbnail_width":2304,"aspectRatio":0.75,"thumb":{"url":"https://cdn.loom.com/sessions/thumbnails/1ad3bbd64caa4178a995032addbf57f1-00001.gif","w":2304,"h":1728},"version":"1.0","title":"Draggable Inputs | Webflow Form UI Kit","provider_name":"Loom","type":"video","thumbnail_height":1728,"source":"https://www.loom.com","thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/1ad3bbd64caa4178a995032addbf57f1-00001.gif"}},"style":{"padding-top":"75%"}},"search":{"exclude":true},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b845","type":"Heading","tag":"h5","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b846"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h5"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b846","text":true,"v":"Step 1"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b847","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b848","58ff690d-e328-a11a-f451-03cb6925b849","58ff690d-e328-a11a-f451-03cb6925b84b","58ff690d-e328-a11a-f451-03cb6925b84c","58ff690d-e328-a11a-f451-03cb6925b84e","58ff690d-e328-a11a-f451-03cb6925b84f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b848","text":true,"v":"Duplicate the boxes to add more options. Be sure to keep the attributes and class names the same. "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b849","type":"Span","tag":"span","classes":["a79ff77a-bb43-4e15-28be-aae623fdb4fb"],"children":["58ff690d-e328-a11a-f451-03cb6925b84a"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b84a","text":true,"v":"MS Box"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b84b","text":true,"v":" and "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b84c","type":"Span","tag":"span","classes":["a79ff77a-bb43-4e15-28be-aae623fdb4fb"],"children":["58ff690d-e328-a11a-f451-03cb6925b84d"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b84d","text":true,"v":"MS Boxes"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b84e","text":true,"v":" are required class names. "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b84f","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b850","type":"Heading","tag":"h5","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b851"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h5"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b851","text":true,"v":"Step 2"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b852","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b853","58ff690d-e328-a11a-f451-03cb6925b854"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b853","text":true,"v":"Add the following code to the header of your page or site. "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b854","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b855","type":"Paragraph","tag":"p","classes":["87928309-60f1-1e42-eae0-08e138556c4c"],"children":["58ff690d-e328-a11a-f451-03cb6925b856","58ff690d-e328-a11a-f451-03cb6925b857","58ff690d-e328-a11a-f451-03cb6925b858","58ff690d-e328-a11a-f451-03cb6925b859","58ff690d-e328-a11a-f451-03cb6925b85a","58ff690d-e328-a11a-f451-03cb6925b85b","58ff690d-e328-a11a-f451-03cb6925b85c","58ff690d-e328-a11a-f451-03cb6925b85d","58ff690d-e328-a11a-f451-03cb6925b85e","58ff690d-e328-a11a-f451-03cb6925b85f","58ff690d-e328-a11a-f451-03cb6925b860","58ff690d-e328-a11a-f451-03cb6925b861","58ff690d-e328-a11a-f451-03cb6925b862","58ff690d-e328-a11a-f451-03cb6925b863","58ff690d-e328-a11a-f451-03cb6925b864","58ff690d-e328-a11a-f451-03cb6925b865"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b856","text":true,"v":"<style>"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b857","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b858","text":true,"v":"[draggable] {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b859","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b85a","text":true,"v":" user-select: none;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b85b","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b85c","text":true,"v":"}"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b85d","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b85e","text":true,"v":"[data-value] {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b85f","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b860","text":true,"v":"\tpointer-events: none;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b861","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b862","text":true,"v":"}"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b863","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b864","text":true,"v":"</style>"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b865","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b866","type":"Heading","tag":"h5","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b867"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h5"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b867","text":true,"v":"Step 3"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b868","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b869","58ff690d-e328-a11a-f451-03cb6925b86a"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b869","text":true,"v":"Next up, you can change the styling of boxes which are about to \"replaced.\" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b86a","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b86b","type":"Block","tag":"div","classes":["e0d241c7-d3c0-0d48-d4b5-231c5f5639d7","e0d241c7-d3c0-0d48-d4b5-231c5f5639d8"],"children":["58ff690d-e328-a11a-f451-03cb6925b86c","58ff690d-e328-a11a-f451-03cb6925b86d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b86c","type":"HtmlEmbed","tag":"div","classes":["ce1ecafa-2eb8-2358-c2dd-5ddb6c46c763","8f030265-3482-c579-def9-675de7f866cf"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b86d","type":"Block","tag":"div","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b86e"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-value","value":"inner-html"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b86e","text":true,"v":"Style me"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b86f","type":"Heading","tag":"h5","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b870"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h5"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b870","text":true,"v":"Step 4"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b871","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b872","58ff690d-e328-a11a-f451-03cb6925b873"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b872","text":true,"v":"If you want to use a hidden/disabled input then you can add the following code to an embed in Webflow. You can change NAME to be anything you like. "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b873","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b874","type":"Paragraph","tag":"p","classes":["87928309-60f1-1e42-eae0-08e138556c4c"],"children":["58ff690d-e328-a11a-f451-03cb6925b875","58ff690d-e328-a11a-f451-03cb6925b876"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b875","text":true,"v":"<input type=\"hidden\" data-input=\"drag-order\" maxlength=\"256\" name=\"NAME\" data-name=\"NAME\" id=\"NAME\" data-ms-member=\"FIELD_ID\" required=\"\">"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b876","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b877","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b878","58ff690d-e328-a11a-f451-03cb6925b879","58ff690d-e328-a11a-f451-03cb6925b87b","58ff690d-e328-a11a-f451-03cb6925b87c"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b878","text":true,"v":"The "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b879","type":"Emphasized","tag":"em","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b87a"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b87a","text":true,"v":"data-ms-member"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b87b","text":true,"v":" part is only required if you're using Memberstack. "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b87c","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b87d","type":"Heading","tag":"h5","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b87e"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h5"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b87e","text":true,"v":"Step 5"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b87f","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b880","58ff690d-e328-a11a-f451-03cb6925b881"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b880","text":true,"v":"Last, and most importantly, you need to add the following code before the closing </body> tag. "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b881","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b882","type":"Paragraph","tag":"p","classes":["87928309-60f1-1e42-eae0-08e138556c4c"],"children":["58ff690d-e328-a11a-f451-03cb6925b883","58ff690d-e328-a11a-f451-03cb6925b884","58ff690d-e328-a11a-f451-03cb6925b885","58ff690d-e328-a11a-f451-03cb6925b886","58ff690d-e328-a11a-f451-03cb6925b887","58ff690d-e328-a11a-f451-03cb6925b888","58ff690d-e328-a11a-f451-03cb6925b889","58ff690d-e328-a11a-f451-03cb6925b88a","58ff690d-e328-a11a-f451-03cb6925b88b","58ff690d-e328-a11a-f451-03cb6925b88c","58ff690d-e328-a11a-f451-03cb6925b88d","58ff690d-e328-a11a-f451-03cb6925b88e","58ff690d-e328-a11a-f451-03cb6925b88f","58ff690d-e328-a11a-f451-03cb6925b890","58ff690d-e328-a11a-f451-03cb6925b891","58ff690d-e328-a11a-f451-03cb6925b892","58ff690d-e328-a11a-f451-03cb6925b893","58ff690d-e328-a11a-f451-03cb6925b894","58ff690d-e328-a11a-f451-03cb6925b895","58ff690d-e328-a11a-f451-03cb6925b896","58ff690d-e328-a11a-f451-03cb6925b897","58ff690d-e328-a11a-f451-03cb6925b898","58ff690d-e328-a11a-f451-03cb6925b899","58ff690d-e328-a11a-f451-03cb6925b89a","58ff690d-e328-a11a-f451-03cb6925b89b","58ff690d-e328-a11a-f451-03cb6925b89c","58ff690d-e328-a11a-f451-03cb6925b89d","58ff690d-e328-a11a-f451-03cb6925b89e","58ff690d-e328-a11a-f451-03cb6925b89f","58ff690d-e328-a11a-f451-03cb6925b8a0","58ff690d-e328-a11a-f451-03cb6925b8a1","58ff690d-e328-a11a-f451-03cb6925b8a2","58ff690d-e328-a11a-f451-03cb6925b8a3","58ff690d-e328-a11a-f451-03cb6925b8a4","58ff690d-e328-a11a-f451-03cb6925b8a5","58ff690d-e328-a11a-f451-03cb6925b8a6","58ff690d-e328-a11a-f451-03cb6925b8a7","58ff690d-e328-a11a-f451-03cb6925b8a8","58ff690d-e328-a11a-f451-03cb6925b8a9","58ff690d-e328-a11a-f451-03cb6925b8aa","58ff690d-e328-a11a-f451-03cb6925b8ab","58ff690d-e328-a11a-f451-03cb6925b8ac","58ff690d-e328-a11a-f451-03cb6925b8ad","58ff690d-e328-a11a-f451-03cb6925b8ae","58ff690d-e328-a11a-f451-03cb6925b8af","58ff690d-e328-a11a-f451-03cb6925b8b0","58ff690d-e328-a11a-f451-03cb6925b8b1","58ff690d-e328-a11a-f451-03cb6925b8b2","58ff690d-e328-a11a-f451-03cb6925b8b3","58ff690d-e328-a11a-f451-03cb6925b8b4","58ff690d-e328-a11a-f451-03cb6925b8b5","58ff690d-e328-a11a-f451-03cb6925b8b6","58ff690d-e328-a11a-f451-03cb6925b8b7","58ff690d-e328-a11a-f451-03cb6925b8b8","58ff690d-e328-a11a-f451-03cb6925b8b9","58ff690d-e328-a11a-f451-03cb6925b8ba","58ff690d-e328-a11a-f451-03cb6925b8bb","58ff690d-e328-a11a-f451-03cb6925b8bc","58ff690d-e328-a11a-f451-03cb6925b8bd","58ff690d-e328-a11a-f451-03cb6925b8be","58ff690d-e328-a11a-f451-03cb6925b8bf","58ff690d-e328-a11a-f451-03cb6925b8c0","58ff690d-e328-a11a-f451-03cb6925b8c1","58ff690d-e328-a11a-f451-03cb6925b8c2","58ff690d-e328-a11a-f451-03cb6925b8c3","58ff690d-e328-a11a-f451-03cb6925b8c4","58ff690d-e328-a11a-f451-03cb6925b8c5","58ff690d-e328-a11a-f451-03cb6925b8c6","58ff690d-e328-a11a-f451-03cb6925b8c7","58ff690d-e328-a11a-f451-03cb6925b8c8","58ff690d-e328-a11a-f451-03cb6925b8c9","58ff690d-e328-a11a-f451-03cb6925b8ca","58ff690d-e328-a11a-f451-03cb6925b8cb","58ff690d-e328-a11a-f451-03cb6925b8cc","58ff690d-e328-a11a-f451-03cb6925b8cd","58ff690d-e328-a11a-f451-03cb6925b8ce","58ff690d-e328-a11a-f451-03cb6925b8cf","58ff690d-e328-a11a-f451-03cb6925b8d0","58ff690d-e328-a11a-f451-03cb6925b8d1","58ff690d-e328-a11a-f451-03cb6925b8d2","58ff690d-e328-a11a-f451-03cb6925b8d3","58ff690d-e328-a11a-f451-03cb6925b8d4","58ff690d-e328-a11a-f451-03cb6925b8d5","58ff690d-e328-a11a-f451-03cb6925b8d6","58ff690d-e328-a11a-f451-03cb6925b8d7","58ff690d-e328-a11a-f451-03cb6925b8d8","58ff690d-e328-a11a-f451-03cb6925b8d9","58ff690d-e328-a11a-f451-03cb6925b8da","58ff690d-e328-a11a-f451-03cb6925b8db","58ff690d-e328-a11a-f451-03cb6925b8dc","58ff690d-e328-a11a-f451-03cb6925b8dd","58ff690d-e328-a11a-f451-03cb6925b8de","58ff690d-e328-a11a-f451-03cb6925b8df","58ff690d-e328-a11a-f451-03cb6925b8e0","58ff690d-e328-a11a-f451-03cb6925b8e1","58ff690d-e328-a11a-f451-03cb6925b8e2","58ff690d-e328-a11a-f451-03cb6925b8e3","58ff690d-e328-a11a-f451-03cb6925b8e4","58ff690d-e328-a11a-f451-03cb6925b8e5","58ff690d-e328-a11a-f451-03cb6925b8e6","58ff690d-e328-a11a-f451-03cb6925b8e7","58ff690d-e328-a11a-f451-03cb6925b8e8","58ff690d-e328-a11a-f451-03cb6925b8e9","58ff690d-e328-a11a-f451-03cb6925b8ea","58ff690d-e328-a11a-f451-03cb6925b8eb","58ff690d-e328-a11a-f451-03cb6925b8ec","58ff690d-e328-a11a-f451-03cb6925b8ed","58ff690d-e328-a11a-f451-03cb6925b8ee","58ff690d-e328-a11a-f451-03cb6925b8ef","58ff690d-e328-a11a-f451-03cb6925b8f0","58ff690d-e328-a11a-f451-03cb6925b8f1","58ff690d-e328-a11a-f451-03cb6925b8f2","58ff690d-e328-a11a-f451-03cb6925b8f3","58ff690d-e328-a11a-f451-03cb6925b8f4","58ff690d-e328-a11a-f451-03cb6925b8f5","58ff690d-e328-a11a-f451-03cb6925b8f6"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b883","text":true,"v":"<!--🟢 DRAG N DROP 🟢-->"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b884","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b885","text":true,"v":"<script>"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b886","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b887","text":true,"v":"document.addEventListener('DOMContentLoaded', (event) => { var dragSrcEl = null;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b888","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b889","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b88a","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b88b","text":true,"v":" function handleDragStart(e) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b88c","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b88d","text":true,"v":" this.style.opacity = '0.4';"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b88e","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b88f","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b890","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b891","text":true,"v":" dragSrcEl = this; e.dataTransfer.effectAllowed = 'move';"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b892","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b893","text":true,"v":" e.dataTransfer.setData('text/html', this.innerHTML);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b894","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b895","text":true,"v":" } function handleDragOver(e) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b896","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b897","text":true,"v":" if (e.preventDefault) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b898","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b899","text":true,"v":" e.preventDefault();"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b89a","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b89b","text":true,"v":" } e.dataTransfer.dropEffect = 'move';"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b89c","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b89d","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b89e","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b89f","text":true,"v":" return false;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a0","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a1","text":true,"v":" } function handleDragEnter(e) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a2","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a3","text":true,"v":" this.classList.add('over');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a4","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a5","text":true,"v":" } function handleDragLeave(e) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a6","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a7","text":true,"v":" this.classList.remove('over');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a8","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8a9","text":true,"v":" } function handleDrop(e) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8aa","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ab","text":true,"v":" if (e.stopPropagation) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ac","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ad","text":true,"v":" e.stopPropagation(); // stops the browser from redirecting."},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ae","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8af","text":true,"v":" }"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b0","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b1","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b2","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b3","text":true,"v":" if (dragSrcEl != this) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b4","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b5","text":true,"v":" dragSrcEl.innerHTML = this.innerHTML;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b6","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b7","text":true,"v":" this.innerHTML = e.dataTransfer.getData('text/html');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b8","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8b9","text":true,"v":" }"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ba","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8bb","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8bc","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8bd","text":true,"v":" let orderedBoxes = document.querySelectorAll('.ms-box div[data-value=\"true\"]'); let orderList = Array.from(orderedBoxes).map(function(box) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8be","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8bf","text":true,"v":" return box.innerHTML;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c0","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c1","text":true,"v":" }).join(','); let input = document.querySelector('input[data-input=\"drag-order\"]'); input.value = orderList; return false;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c2","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c3","text":true,"v":" } function handleDragEnd(e) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c4","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c5","text":true,"v":" this.style.opacity = '1';"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c6","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c7","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c8","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8c9","text":true,"v":" items.forEach(function (item) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ca","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8cb","text":true,"v":" item.classList.remove('over');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8cc","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8cd","text":true,"v":" });"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ce","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8cf","text":true,"v":" }"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d0","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d1","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d2","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d3","text":true,"v":" let items = document.querySelectorAll('.ms-boxes .ms-box');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d4","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d5","text":true,"v":" items.forEach(function(item) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d6","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d7","text":true,"v":" item.addEventListener('dragstart', handleDragStart, false);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d8","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8d9","text":true,"v":" item.addEventListener('dragenter', handleDragEnter, false);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8da","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8db","text":true,"v":" item.addEventListener('dragover', handleDragOver, false);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8dc","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8dd","text":true,"v":" item.addEventListener('dragleave', handleDragLeave, false);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8de","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8df","text":true,"v":" item.addEventListener('drop', handleDrop, false);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e0","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e1","text":true,"v":" item.addEventListener('dragend', handleDragEnd, false);"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e2","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e3","text":true,"v":" }); // Set initial value of the input field"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e4","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e5","text":true,"v":" let orderedBoxes = document.querySelectorAll('.ms-box div[data-value=\"true\"]');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e6","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e7","text":true,"v":" let orderList = Array.from(orderedBoxes).map(function(box) {"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e8","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8e9","text":true,"v":" return box.innerHTML;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ea","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8eb","text":true,"v":" }).join(',');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ec","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ed","text":true,"v":" let input = document.querySelector('input[data-input=\"drag-order\"]');"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ee","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8ef","text":true,"v":" input.value = orderList;"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f0","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f1","text":true,"v":" "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f2","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f3","text":true,"v":"});"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f4","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f5","text":true,"v":"</script>"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f6","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f7","type":"Heading","tag":"h5","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b8f8"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h5"}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f8","text":true,"v":"Credits"},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8f9","type":"Paragraph","tag":"p","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b8fa","58ff690d-e328-a11a-f451-03cb6925b8fb"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8fa","text":true,"v":"ChatGPT and this "},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8fb","type":"Link","tag":"a","classes":[],"children":["58ff690d-e328-a11a-f451-03cb6925b8fc"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":false,"link":{"url":"https://web.dev/drag-and-drop/","mode":"external","target":"_blank"}}},{"_id":"58ff690d-e328-a11a-f451-03cb6925b8fc","text":true,"v":"article on WebDev"}],"styles":[{"_id":"a79ff77a-bb43-4e15-28be-aae623fdb4fb","fake":false,"type":"class","name":"ms-wf-class","namespace":"","comb":"","styleLess":"display: inline-block; padding-top: 5px; padding-right: 7px; padding-bottom: 3px; padding-left: 7px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; background-color: hsla(210.64935064935062, 92.96%, 52.63%, 1.00); box-shadow: 1px 1px 3px 0 hsla(237, 90.68%, 25.87%, 0.50); color: white; font-size: 13px; line-height: 1.2em; font-weight: 400;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"87928309-60f1-1e42-eae0-08e138556c4c","fake":false,"type":"class","name":"ms-code","namespace":"","comb":"","styleLess":"padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: white; font-family: Inconsolata;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"50462ff5-4e00-c0b3-cefd-808f44527568","fake":false,"type":"class","name":"ms-loom","namespace":"","comb":"","styleLess":"overflow: hidden; margin-bottom: 12px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-image: @img_example_bg; background-position: 0px 0px; background-size: auto;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"ce1ecafa-2eb8-2358-c2dd-5ddb6c46c763","fake":false,"type":"class","name":"ms-button-svg","namespace":"","comb":"","styleLess":"display: flex; width: 16px; height: 16px; padding-top: 0px; padding-bottom: 0px; justify-content: center; align-items: center;","variants":{},"children":["2cfb574e-44d4-cd3a-6c4b-921a8269fd74","8f030265-3482-c579-def9-675de7f866cf"],"selector":null},{"_id":"2657aadb-6326-6737-fabb-4243fa3dff9f","fake":false,"type":"class","name":"ms-input-label","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":["d7ffcb3f-9002-7376-c22d-56704364b904","ce4843a6-c93b-e110-6f64-9819d94aadc2","4d1aaa9e-21c5-a440-a9be-0811c5edf335","11b8e98c-5ab6-f77d-7db1-da0f96642410","80ffcf25-c38b-1ca7-865a-74cc7ed8ce63"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e0d241c7-d3c0-0d48-d4b5-231c5f5639d8","fake":false,"type":"class","name":"over","namespace":"","comb":"&","styleLess":"border-top-style: solid; border-top-color: hsla(211.45161290322582, 100.00%, 42.57%, 1.00); border-right-style: solid; border-right-color: hsla(211.45161290322582, 100.00%, 42.57%, 1.00); border-bottom-style: solid; border-bottom-color: hsla(211.45161290322582, 100.00%, 42.57%, 1.00); border-left-style: solid; border-left-color: hsla(211.45161290322582, 100.00%, 42.57%, 1.00); background-color: hsla(229, 42.28%, 96.39%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"34ede506-69a8-3b69-c891-289f3b306d2d","fake":false,"type":"class","name":"ms-drag-color","namespace":"","comb":"","styleLess":"margin-left: auto;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d4047300-ace7-5a9f-b875-60fe8e0bbcf5","fake":false,"type":"class","name":"ms-drawer-contain","namespace":"","comb":"","styleLess":"padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.00%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"22325e1f-926a-ca9b-a725-087976f3b6ff","fake":false,"type":"class","name":"ms-dropdown-svg","namespace":"","comb":"","styleLess":"display: flex; width: 30px; height: 20px; justify-content: center; align-items: center; opacity: 0.5;","variants":{},"children":["fc731220-5690-450f-48bc-4d4d733a22b0"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"93f5ef5d-ee26-955f-0b8a-c38727cfea5d","fake":false,"type":"class","name":"ms-how-drawer","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; margin-top: -10px; margin-bottom: 20px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background-color: hsla(0, 0.00%, 97.16%, 1.00);","variants":{},"children":["a2fad997-c977-ccb1-af6d-620c77ce9676"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"0d41ce05-dcef-7195-d116-e65f5c3982f0","fake":false,"type":"class","name":"ms-drawer-top","namespace":"","comb":"","styleLess":"display: flex; padding-top: 11px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; justify-content: space-between; align-items: center; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 400;","variants":{"main_hover":{"styleLess":"background-color: hsla(235, 0.00%, 92.00%, 1.00);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e0d241c7-d3c0-0d48-d4b5-231c5f5639d7","fake":false,"type":"class","name":"ms-box","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; min-height: 40px; margin-bottom: 6px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 6px; justify-content: flex-start; align-items: center; grid-column-gap: 6px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: white; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); transition-property: box-shadow, border-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; font-weight: 400; cursor: move;","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 56.47%, 1.00);"},"main_hover":{"styleLess":"z-index: 2; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); box-shadow: none /* 0 5px 10px -5px rgba(0, 0, 0, 0.1) */;"}},"children":["e0d241c7-d3c0-0d48-d4b5-231c5f5639d8"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b2167bfb-f6c9-1425-098c-a58042615f45","fake":false,"type":"class","name":"ms-input","namespace":"","comb":"","styleLess":"position: relative; min-height: 40px; margin-bottom: 20px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: white; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); transition-property: box-shadow, border-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(237, 47.06%, 13.06%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 56.47%, 1.00);"},"main_hover":{"styleLess":"z-index: 2; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); box-shadow: none /* 0 5px 10px -5px rgba(0, 0, 0, 0.1) */;"}},"children":["9e5eb4fb-44a4-c91d-8ddd-07861650e0c8","6c25fb96-05cb-b138-7fbf-0e3ab0b0d56d","80735255-ff59-d93c-1aea-88ecac4dadce","954d57db-0fed-9cf1-72ab-fb1516c42430","6863c917-e902-2508-aec1-574c75b572e9","02eb6465-b4fb-4f51-1bf4-fdd3bc4db90d","aded1135-ba0a-79a0-7a7e-fca48f8df326","9a885656-db7b-46f3-c8a9-17ace4577e2c","5b4775aa-9d13-3e2b-3f3d-9f508f024017","6d750efc-e453-47ae-4543-2022cf6e8eba","4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6","d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70","9e7f3093-1ca9-90da-16e7-e96b1b90424f","c8d9cff0-a95a-ba86-4147-2df6c1c39698","4a592ac0-fc05-3bb2-d18c-1d647acb46cd","7b282392-e06f-eb2a-852d-885bc614c721","1b7159b8-6cf4-7fc8-156a-9485d33b2130","2549b099-b8ab-f916-0668-1e95ecd99f87"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"73f529f2-aa61-4baf-340f-708f676f0c22","fake":false,"type":"class","name":"ms-help-text","namespace":"","comb":"","styleLess":"margin-top: -15px; margin-bottom: 15px; opacity: 0.8; font-size: 90%; font-weight: 300;","variants":{},"children":["9712caa0-24c0-8432-1d15-a2edc5dae14c"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"8f030265-3482-c579-def9-675de7f866cf","fake":false,"type":"class","name":"is-drag","namespace":"","comb":"&","styleLess":"width: 18px; opacity: 0.5;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3b998372-f799-dc18-eb99-4516eebd4411","fake":false,"type":"class","name":"ms-space","namespace":"","comb":"","styleLess":"width: 10px; height: 10px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e0d241c7-d3c0-0d48-d4b5-231c5f5639d5","fake":false,"type":"class","name":"ms-boxes","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-6","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-8","e-9"],"target":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","createdOn":1680722535923}],"events":[{"id":"e-8","name":"","animationType":"custom","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-5","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-9"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]},"targets":[{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1680722535924},{"id":"e-9","name":"","animationType":"custom","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-6","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-8"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]},"targets":[{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1680722535924}],"actionLists":[{"id":"a-5","title":"MS Drawer Open","actionItemGroups":[{"actionItems":[{"id":"a-5-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"heightValue":41,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]},{"actionItems":[{"id":"a-5-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"widthUnit":"px","heightUnit":"AUTO","locked":false},"instant":false},{"id":"a-5-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|f71a2c90-7e45-8bca-764e-22f54034c6d1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":-180,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1680722366537},{"id":"a-6","title":"MS Drawer Close","actionItemGroups":[{"actionItems":[{"id":"a-6-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"heightValue":42,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false},{"id":"a-6-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|f71a2c90-7e45-8bca-764e-22f54034c6d1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":null,"zValue":0,"xUnit":"DEG","yUnit":"deg","zUnit":"deg"},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1680722366537}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}