2b:null 2c:["$","title",null,{"children":"Sortable playground | dleeftink | Observable"}] 31:T41c,gridDemo = html `

Item 01

Item 02

Item 03

Item 04

Item 05

Item 06

Item 07

Item 08

Item 09

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

`32:[] 2f:{"id":"d5f83b3d0e192885","slug":"sortable-playground","title":"Sortable playground","thumbnail":"6b99168f41849aa2160fb9c8f1a0931ce4c24eaaf87d1d75110c4c73db2e0505","access_level":"public","create_time":"$D2021-12-15T17:16:18.850Z","update_time":"$D2024-04-25T05:34:39.407Z","view_time":null,"first_public_time":"$D2024-04-25T00:28:52.373Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024"},"version":892,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}],"members":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null,"role":"editor"},{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Sortable playground","cells":[{"id":0,"value":"# Sortable playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewof drag = { \n\n let dyn = html`${[\n \"A demo sentence with some words. \",\"Drag and drop writing, why not? \",\n \"Just some textual filler. \", \"Infinitely rearrangable content. \",\n \"Can we drag this out more? \",\"Do not let any sentence be last! \"\n ].map(t=>html.fragment`${t}`)}`\n \n let out = Sortable.create(dyn,{ \n group: 'shared',\n animation: 50,\n onEnd: (evt)=> { \n out.el.parentNode.value = Array.from(evt.to.children).map(d => d.textContent); \n dyn.parentNode.dispatchEvent(new CustomEvent(\"input\"))\n }\n })\n\n return html`

${out.el}

`\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":843,"value":"drag","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"{ var swc = html`\n \n \n \n ${d3.schemeCategory10\n\n .map((color, i) => html.fragment\n`\n \n \n \n `)} \n

#	Color	Swatch
${i}	${color}

`\n \n \n \n var out = Sortable.create(swc,\n { group: 'shared',\n animation: 50,\n filter: '.non',\n onEnd: (evt)=> { \n out.el.value = Array.from(\n evt.to.children).map(d => \n d.textContent); \n swc.dispatchEvent(new \n CustomEvent(\"input\"))}\n });\n \n return html`${out.el}`\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"new Sortable(gridDemo, {\n group: 'shared',\n\tanimation: 150,\n ghostClass: 'ghost'\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":211,"value":"genGrid = makeRows(3,4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"new Sortable(genGrid, {\n\tanimation: 150,\n ghostClass: 'ghost'\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"css = html`\n\nstyle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":636,"value":"uix","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":" viewof uix = {\n \n let div = document\n .createElement(\"div\")\n let inp = document\n .createElement(\"input\")\n div.append(inp)\n\n let sel = div \n .querySelector('input')\n \n let tag = new Tagify(sel, \n { callbacks: \n { \"change\": e => upd() }})\n\n let ren = html`${tag.DOM.scope}`\n\n new Sortable(ren, {\n\t // animation: 150,\n dragoverBubble: false,\n forceFallback: true,\n /*fallbackTolerance: 6,\n touchStartThreshold:0,*/\n draggable: '.tagify__tag',\n onEnd: e => { tag\n .updateValueByDOMTags()}\n })\n\n let upd = () => {\n ren.value = tag.value;\n ren.dispatchEvent(new \n CustomEvent(\"input\"))\n }; upd( )\n \n return ren\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":206,"value":"// https://stackoverflow.com/questions/57550082/creating-a-16x16-grid-using-javascript\n\nfunction makeRows(rows, cols) {\n\n const container = html`

`\n container.style.setProperty('--grid-rows', rows);\n container.style.setProperty('--grid-cols', cols);\n for (var c = 0; c < (rows * cols); c++) {\n let cell = document.createElement(\"div\");\n cell.innerText = (c + 1);\n container.appendChild(cell).className = \"grid-item\";\n };\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":776,"value":"loadCSS = (path, clb) => {\n var cssFile = document.createElement(\"link\");\ncssFile.setAttribute(\"rel\", \"stylesheet\");\ncssFile.setAttribute(\"type\", \"text/css\");\n// Add event listener\ncssFile.onload = function(){ clb }\ncssFile.setAttribute(\"href\", path);\ndocument.getElementsByTagName(\"head\")[0].appendChild(cssFile); \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Sortable = import('https://unpkg.com/sortablejs@1.14.0/modular/sortable.esm.js?module').then(d => d.default)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"Tagify = import('https://cdn.skypack.dev/@yaireo/tagify@4.9.4?min').then(d => d.default)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"