25:["$","title",null,{"children":"Hello, Dragology | Toph Tucker | Observable"}] 4b:T6ad,# Hello, Dragology **Declarative Dragging** ([website](https://declarative-dragging.github.io/), [paper](https://andrewblinn.com/papers/D2.pdf)), or “D2”, is a new paradigm for interface design by Joshua Horowitz, Andrew Blinn, and Jeffrey Heer that just won Best Paper at the Association for Computing Machinery’s 2026 Symposium on User Interface Software and Technology. It is not to be confused with [B2](https://vis.csail.mit.edu/pubs/b2/) (bridging code and visualization in notebooks), [P5](https://p5js.org/) (creative coding), [G2](https://g2.antv.antgroup.com/en/) (grammar-of-graphics charts), [H3](https://h3geo.org/) (global hex grid), [G6](https://www.gulfstream.com/en/aircraft/gulfstream-g600/) (twin-turbofan ultra-long-range business jet), [C3](https://c3js.org/) (reusable charts), [D4](https://d4.js.org/) (declarative charts), or this other [D2](https://d2lang.com/) (declarative diagramming). I think the basic idea is to let you build drag-and-drop interfaces by describing the states that dragging might lead to. It speculatively renders all possible future states, picks the one that seems closest to the mouse, and transitions smoothly to it. There are nice composable operators for specifying what “closest” means and how to transition to it. You should watch Josh’s very lucid and inspiring five-minute [video introduction](https://www.youtube.com/watch?v=l7v-UwpsEbk). The conceptual paradigm is implemented in a JavaScript library called **Dragology** ([GitHub](https://github.com/declarative-dragging/dragology)). This notebook will use it to walk through creating a version of the [lists-2d](https://declarative-dragging.github.io/uist26/#/demos/lists-2d) demo. 4c:T5a3,This list will become the set of states something dragged could drop into. Notice how the code inside the `produceAmb` recipe stays flat. I replaced a plain number (the array index) with a weirder thing, `dragology.amb([0, 1, 2])`. Its return shape isn’t weird: it will just return a number, so I don’t have to refactor anything. But its effect is weird: `produceAmb` will now return the possibilities for each possible value of the amb. It’s like… local substitutions can create branches in the global control flow. This kind of thing is apparently covered in _Structure and Interpretation of Computer Programs_, [section 4.3](https://mitp-content-server.mit.edu/books/content/sectbyfn/books_pres_0/6515/sicp.zip/full-text/book/book-Z-H-28.html#%_sec_4.3). And I guess it relates to React hooks, the `async` operator, continuations, monads, algebraic effects, and the [function coloring problem](https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/). It has to do with a lot of seemingly beautiful material I’ve never studied or understood, since I barely studied computer science and know only JavaScript. I’m wrapping my head around it just barely well enough to use it. Next, we’ll make it draggable. Dragology requires React. Since this is a client-side notebook without a build step, we use [htm](https://github.com/developit/htm) to get JSX as a template literal that doesn’t need to transpile.4d:[] 47:{"id":"26f47ed26f703856","slug":"hello-dragology","title":"Hello, Dragology","thumbnail":"2295b878d3b16e5a2fb908c04c5093e4ef4d151ea8d1041979bf860c20c0f699","access_level":"public","create_time":"$D2026-11-03T19:17:16.801Z","update_time":"$D2026-11-04T08:02:22.338Z","view_time":null,"first_public_time":"$D2026-11-04T08:02:51.446Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false},"version":1107,"publish_version":1107,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello, Dragology","cells":[{"id":1,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import * as dragology from \"npm:dragology\";\ndisplay(dragology);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Dragology works by enumerating reachable states: what can dragging achieve? _E.g._, you could get to different orderings of a list. Starting with the first three letters of the alphabet and dragging “A”, you could get BAC, BCA, or — if you barely drag it — ABC.\n\nDragology doesn’t really care how you get to the reachable states. We can do it with simple JavaScript. Define a list, then splice out the “A”:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"const list = [\"A\", \"B\", \"C\"];\nconst [letter] = list.splice(0, 1);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Now splice it back in at each possible positions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"const possibilities = display(\n d3.range(list.length + 1).map((i) => list.toSpliced(i, 0, letter))\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"\n\n

\n ${possibilities.map((items) =>\n html`

${items.map(d =>\n html`

${d}

`)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"That’s fine. But now, if we wanted to do something with this ambiguously ordered array, we’d have to operate on an array of arrays. As we add choices, the result becomes increasingly nested, and we have to keep restructuring our surrounding code to loop over it, and it gets hard to reason about.\n\nSo, some Dragology examples borrow a concept from the dawn of computer science that nevertheless remains (in my experience) niche. In 1961, a year after his big LISP paper, John McCarthy published “[A Basis for a Mathematical Theory of Computation](https://www-formal.stanford.edu/jmc/basis1.pdf)”, which considers what conditional and recursive functions can achieve in general. It includes a section on _ambiguous_ functions — which “are not really functions” in that they do not return a result, but rather a collection of possible results.\n\nFor this, Dragology introduces the `amb` function, which… errors:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"dragology.amb([\"hello\", \"goodnight\"])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"The authors [explain](https://github.com/declarative-dragging/dragology/blob/main/src/amb.ts): “The `amb` operator takes an array of options and conceptually ‘returns all of them at once’. In reality, it throws a special error that causes the computation to branch into multiple executions, one for each option.”\n\nSo, when you call it inside `runAmb`, it explores every branch:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"dragology.runAmb(() => dragology.amb([\"hello\", \"goodnight\"]))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"This gets more interesting when you have multiple ambiguities:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"dragology.runAmb(() => `${dragology.amb([\"hello\", \"goodnight\"])}, ${dragology.amb([\"world\", \"moon\"])}`)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Note how strange that is! The ambiguities are interpolated into a string at different points, and somehow interact to return the Cartesian product of their possible values. That’s far from how an array would interpolate into a string:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"`${[\"hello\", \"goodnight\"]}, ${[\"world\", \"moon\"]}`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"And far from how I would typically compute the Cartesian product with D3:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3.cross([\"hello\", \"goodnight\"], [\"world\", \"moon\"]).map(d => d.join(\", \"))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"With D3 or typical JavaScript operations on arrays, going from returning “hello, world” to returning the Cartesian product of phatic utterances to celestial bodies would require restructuring your code. Dragology’s approach lets you introduce ambiguity _locally_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Before we use `amb` to reorder ABC, we’ll bring in another concept: the state manipulation library [Immer](https://immerjs.github.io/immer/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import * as immer from \"npm:immer\";\ndisplay(immer);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"Immer lets you produce an object immutably by mutating a “draft” object in a “recipe” function. For example, here we add “A” back to the start of our array. Ordinarily, `splice` would mutate the object, but here we get a fresh object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"immer.produce([\"B\", \"C\"], (draft) => { draft.splice(0, 0, \"A\"); })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"That preserves immutability while giving us the expressiveness of imperative mutation. That gets useful as the problems get harder.\n\nSo Dragology combines `amb` and `produce` into `produceAmb`, which “returns all possible versions of the base object resulting from different amb choices in the recipe function.”\n\nFor example, I want all the possibilities of putting “A” at any position:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"const possibilities2 = display(\n dragology.produceAmb([\"B\", \"C\"], (draft) => {\n draft.splice(dragology.amb([0, 1, 2]), 0, \"A\");\n })\n);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"

\n ${possibilities2.map((items) =>\n html`

${items.map(d =>\n html`

${d}

`)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import React from \"npm:react@19.2.5\";\nimport * as ReactDOMClient from \"npm:react-dom@19.2.5/client\";\nimport htm from \"npm:htm\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const jsx = htm.bind(React.createElement);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"And we prepare a helper function that mounts and renders a draggable component, which we’ll define shortly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function mountDraggable({draggable, initialState, width, height}, invalidation) {\n const container = document.createElement(\"div\");\n const root = ReactDOMClient.createRoot(container);\n root.render(jsx`<${dragology.DraggableRenderer}\n draggable=${draggable}\n initialState=${initialState}\n width=${width}\n height=${height}\n />`);\n invalidation.then(() => root.unmount());\n return container;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"We’ll wrap our simple list of letters in a simple state object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"const initialState = {items: [\"A\", \"B\", \"C\"]};","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"And now we’ll write our main drag handler. We find the `item` being dragged. We produce a version of the state `without` it, as it has been picked up. And then we produce an _ambiguous_ version of the state with the item put back in an unknown spot. We return the `drag` object with some behaviors chained off of it: the `closest` combinator finds the closest future state among our enumerated possible states; the `withFloating` modifier makes the dragged item follow the mouse until it finds its new home.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function makeOnDragItem(state, drag, itemIdx) {\n return () => {\n const item = state.items[itemIdx];\n\n const without = immer.produce(state, (draft) => {\n draft.items.splice(itemIdx, 1);\n });\n\n const withItem = dragology.produceAmb(without, (draft) => {\n const newIdx = dragology.amb(d3.range(draft.items.length + 1));\n draft.items.splice(newIdx, 0, item);\n });\n\n return drag.closest(withItem).withFloating();\n };\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"With the state logic defined, we move on to rendering. We have a few sizing constants:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"const TILE_SIZE = 50;\nconst TILE_GAP = 8;\nconst ROW_PADDING = 8;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"And some derived layout helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"const ROW_HEIGHT = TILE_SIZE + ROW_PADDING * 2;\nconst tileX = (idx) => ROW_PADDING + idx * (TILE_SIZE + TILE_GAP);\nconst rowWidth = (n) => tileX(n) - TILE_GAP + ROW_PADDING;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"And the draggable component, which receives the state and drag objects and returns an SVG. We draw a rectangle around the whole row, and then a square tile for each item, with the drag handler attached.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const draggableList = ({state, d: drag}) => jsx`\n \n ${state.items.map(\n (item, itemIdx) => jsx`\n \n ${item}\n `\n )}\n`;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"Finally, we render it. Try dragging any of the tiles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"mountDraggable({draggable: draggableList, initialState, width, height: ROW_HEIGHT}, invalidation)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"That’s Dragology! That’s our first and most basic demo.\n\nBut we said we’d do the 2D version. We want to drag and drop to edit a list of lists: multiple rows, each with multiple slots for tiles.\n\nAs before, we’ll begin by inspecting the enumerating possible states. Suppose you have a row with “B” and a row with “C” and “D”.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"const base = {rows: [{items: [\"B\"]}, {items: [\"C\", \"D\"]}]};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"Suppose we want to reorder entire _rows_. It’s basically the same as reordering items from before, but now the items are objects. For example, if we’re debating where to put a row that just has “A”:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"const possibilities_3 = display(\n dragology.produceAmb(base, (draft) => {\n draft.rows.splice(dragology.amb(d3.range(draft.rows.length + 1)), 0, {\n items: [\"A\"]\n });\n })\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"

\n ${possibilities_3.map(({rows}) =>\n html`

${rows.map(({items}) =>\n html`

${items.map(d =>\n html`

${d}

`)}\n

`)\n }\n

\n ${possibilities4.map(({rows}) =>\n html`

${rows.map(({items}) =>\n html`

${items.map(d =>\n html`

${d}

`)}\n

`)\n }\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"Notice that the options for the second amb depend on the value of the first: different rows have different numbers of slots. A Cartesian product is “square” (one set of options against another); this is not. In the first row, “A” could be first or second; in the second row, it could be first, second, or third.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"Now we’ll do our drag handler for the whole row, which basically matches how we did our one-dimensional drag handler for the last demo. We add one twist: the `whenFar` combinator says that, if the dragged row gets too far away, it’ll use the state `without` the dragged element. That is, you can remove an item by dragging it away.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function makeOnDragRow(state, drag, rowIdx) {\n return () => {\n const row = state.rows[rowIdx];\n\n const without = immer.produce(state, (draft) => {\n draft.rows.splice(rowIdx, 1);\n });\n\n const withRow = dragology.produceAmb(without, (draft) => {\n const newRowIdx = dragology.amb(d3.range(draft.rows.length + 1));\n draft.rows.splice(newRowIdx, 0, row);\n });\n\n return drag.closest(withRow).whenFar(without).withFloating();\n };\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"The drag handler for an individual tile is similar, but two-dimensional, like we explored above. It extracts a tile from the state with two indices; `withTile` has ambiguity for both row and tile.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function makeOnDragTile(state, drag, rowIdx, tileIdx) {\n return () => {\n const tile = state.rows[rowIdx].items[tileIdx];\n\n const without = immer.produce(state, (draft) => {\n draft.rows[rowIdx].items.splice(tileIdx, 1);\n });\n\n const withTile = dragology.produceAmb(without, (draft) => {\n const newRow = dragology.amb(draft.rows);\n const newTileIdx = dragology.amb(d3.range(newRow.items.length + 1));\n newRow.items.splice(newTileIdx, 0, tile);\n });\n\n return drag.closest(withTile).whenFar(without).withFloating();\n };\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"We specify our initial state:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"const initialState2d = {\n rows: [\n {id: \"row1\", items: [{id: \"A\"}, {id: \"B\"}]},\n {id: \"row2\", items: [{id: \"C\"}, {id: \"D\"}, {id: \"E\"}, {id: \"F\"}]},\n {id: \"row3\", items: [{id: \"G\"}, {id: \"H\"}, {id: \"I\"}]}\n ]\n};","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"We define some new layout helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"const ROW_GAP = 10;\nconst rowY = (rowIdx) => rowIdx * (ROW_HEIGHT + ROW_GAP);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"We define our draggable component:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"const draggableList2d = ({state, d: drag}) => jsx`\n ${state.rows.map(\n (row, rowIdx) => jsx`\n \n ${row.items.map(\n (tile, tileIdx) => jsx`\n \n ${tile.id}\n `\n )}\n `\n )}\n`;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"And, once more, we render it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mountDraggable({draggable: draggableList2d, initialState: initialState2d, width, height: 300}, invalidation)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"This has been a very slow build-up to one of the simplest examples of D2 and Dragology I could find. We’ve spent a lot of time on things like `produceAmb` that aren’t even a part of the core library; we’ve barely scratched the surface of its operators, which include `vary`, `between`, `withSnapRadius`, `withBranchTransition`, `switchToStateAndFollow`, and more. See the incredibly impressive list of [demos](https://joshuahhh.com/dragology/#/demos).\n\nThanks to Josh, Andrew, and Jeffrey for a beautiful and exciting library!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 24:null