[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fdrag":3},{"id":4,"title":5,"body":6,"description":477,"extension":478,"meta":479,"navigation":346,"path":480,"rawbody":481,"seo":482,"stem":483,"__hash__":484},"docs\u002Fdocs\u002Fdrag.md","Drag",{"type":7,"value":8,"toc":469},"minimark",[9,17,61,75,79,84,90,144,188,192,210,244,248,255,299,302,306,319,434,447,451,458,462,465],[10,11,12,16],"p",{},[13,14,15],"code",{},"--k-drag"," makes an element draggable with mouse, touch, or pen.",[18,19,24],"pre",{"className":20,"code":21,"language":22,"meta":23,"style":23},"language-css shiki shiki-themes github-dark-default",".sticker {\n  --k-drag: both;\n}\n","css","",[13,25,26,39,55],{"__ignoreMap":23},[27,28,31,35],"span",{"class":29,"line":30},"line",1,[27,32,34],{"class":33},"sFSAA",".sticker",[27,36,38],{"class":37},"sZEs4"," {\n",[27,40,42,46,49,52],{"class":29,"line":41},2,[27,43,45],{"class":44},"sQhOw","  --k-drag",[27,47,48],{"class":37},": ",[27,50,51],{"class":33},"both",[27,53,54],{"class":37},";\n",[27,56,58],{"class":29,"line":57},3,[27,59,60],{"class":37},"}\n",[10,62,63,66,67,70,71,74],{},[13,64,65],{},"x"," or ",[13,68,69],{},"y"," limits dragging to one axis, for sliders and sheets. Kinesis sets ",[13,72,73],{},"touch-action",", so a drag on a phone doesn't scroll the page, and a horizontal drag still lets the page scroll vertically.",[76,77],"demo",{"id":78},"drag",[80,81,83],"h2",{"id":82},"release","Release",[10,85,86,89],{},[13,87,88],{},"--k-release"," sets what happens when you let go:",[91,92,93,106],"table",{},[94,95,96],"thead",{},[97,98,99,103],"tr",{},[100,101,102],"th",{},"Value",[100,104,105],{},"Behavior",[107,108,109,121,131],"tbody",{},[97,110,111,118],{},[112,113,114,117],"td",{},[13,115,116],{},"throw"," (default)",[112,119,120],{},"glides on with the release speed and comes to a stop",[97,122,123,128],{},[112,124,125],{},[13,126,127],{},"stay",[112,129,130],{},"stops where you let go",[97,132,133,138],{},[112,134,135],{},[13,136,137],{},"return",[112,139,140,141],{},"springs back home with the element's ",[13,142,143],{},"--k-motion",[18,145,147],{"className":20,"code":146,"language":22,"meta":23,"style":23},".pull-tab {\n  --k-drag: y;\n  --k-release: return;\n  --k-motion: bouncy;\n}\n",[13,148,149,156,166,174,183],{"__ignoreMap":23},[27,150,151,154],{"class":29,"line":30},[27,152,153],{"class":33},".pull-tab",[27,155,38],{"class":37},[27,157,158,160,162,164],{"class":29,"line":41},[27,159,45],{"class":44},[27,161,48],{"class":37},[27,163,69],{"class":33},[27,165,54],{"class":37},[27,167,168,171],{"class":29,"line":57},[27,169,170],{"class":44},"  --k-release",[27,172,173],{"class":37},": return;\n",[27,175,177,180],{"class":29,"line":176},4,[27,178,179],{"class":44},"  --k-motion",[27,181,182],{"class":37},": bouncy;\n",[27,184,186],{"class":29,"line":185},5,[27,187,60],{"class":37},[80,189,191],{"id":190},"bounds","Bounds",[10,193,194,197,198,201,202,205,206,209],{},[13,195,196],{},"--k-bounds"," keeps the element inside its ",[13,199,200],{},"parent",", the ",[13,203,204],{},"scope",", or the ",[13,207,208],{},"viewport",". Dragging past the edge stretches elastically, and the element settles back inside on release.",[18,211,213],{"className":20,"code":212,"language":22,"meta":23,"style":23},".puck {\n  --k-drag: both;\n  --k-bounds: parent;\n}\n",[13,214,215,222,232,240],{"__ignoreMap":23},[27,216,217,220],{"class":29,"line":30},[27,218,219],{"class":33},".puck",[27,221,38],{"class":37},[27,223,224,226,228,230],{"class":29,"line":41},[27,225,45],{"class":44},[27,227,48],{"class":37},[27,229,51],{"class":33},[27,231,54],{"class":37},[27,233,234,237],{"class":29,"line":57},[27,235,236],{"class":44},"  --k-bounds",[27,238,239],{"class":37},": parent;\n",[27,241,242],{"class":29,"line":176},[27,243,60],{"class":37},[80,245,247],{"id":246},"styling-while-dragging","Styling while dragging",[10,249,250,251,254],{},"A dragged element has a ",[13,252,253],{},"data-kinesis-dragging"," attribute:",[18,256,258],{"className":20,"code":257,"language":22,"meta":23,"style":23},".sticker { cursor: grab; }\n.sticker[data-kinesis-dragging] { cursor: grabbing; }\n",[13,259,260,278],{"__ignoreMap":23},[27,261,262,264,267,270,272,275],{"class":29,"line":30},[27,263,34],{"class":33},[27,265,266],{"class":37}," { ",[27,268,269],{"class":33},"cursor",[27,271,48],{"class":37},[27,273,274],{"class":33},"grab",[27,276,277],{"class":37},"; }\n",[27,279,280,282,285,287,290,292,294,297],{"class":29,"line":41},[27,281,34],{"class":33},[27,283,284],{"class":37},"[",[27,286,253],{"class":33},[27,288,289],{"class":37},"] { ",[27,291,269],{"class":33},[27,293,48],{"class":37},[27,295,296],{"class":33},"grabbing",[27,298,277],{"class":37},[10,300,301],{},"A drag doesn't count as a click, so draggable links and buttons don't fire when dropped.",[80,303,305],{"id":304},"reacting-in-javascript","Reacting in JavaScript",[10,307,308,311,312,314,315,318],{},[13,309,310],{},"dragstart",", ",[13,313,78],{},", and ",[13,316,317],{},"dragend"," receive the offset from the resting position and the pointer velocity:",[18,320,324],{"className":321,"code":322,"language":323,"meta":23,"style":23},"language-js shiki shiki-themes github-dark-default","import { kinesis } from \"@amineyarman\u002Fkinesis\"\n\nkinesis(document.querySelector(\".sheet\")).on(\"dragend\", ({ y, velocityY }) => {\n  if (y > 200 || velocityY > 800) closeSheet()\n})\n","js",[13,325,326,342,348,395,429],{"__ignoreMap":23},[27,327,328,332,335,338],{"class":29,"line":30},[27,329,331],{"class":330},"suJrU","import",[27,333,334],{"class":37}," { kinesis } ",[27,336,337],{"class":330},"from",[27,339,341],{"class":340},"s9uIt"," \"@amineyarman\u002Fkinesis\"\n",[27,343,344],{"class":29,"line":41},[27,345,347],{"emptyLinePlaceholder":346},true,"\n",[27,349,350,354,357,360,363,366,369,372,374,377,380,382,384,387,390,393],{"class":29,"line":57},[27,351,353],{"class":352},"sc3cj","kinesis",[27,355,356],{"class":37},"(document.",[27,358,359],{"class":352},"querySelector",[27,361,362],{"class":37},"(",[27,364,365],{"class":340},"\".sheet\"",[27,367,368],{"class":37},")).",[27,370,371],{"class":352},"on",[27,373,362],{"class":37},[27,375,376],{"class":340},"\"dragend\"",[27,378,379],{"class":37},", ({ ",[27,381,69],{"class":44},[27,383,311],{"class":37},[27,385,386],{"class":44},"velocityY",[27,388,389],{"class":37}," }) ",[27,391,392],{"class":330},"=>",[27,394,38],{"class":37},[27,396,397,400,403,406,409,412,415,417,420,423,426],{"class":29,"line":176},[27,398,399],{"class":330},"  if",[27,401,402],{"class":37}," (y ",[27,404,405],{"class":330},">",[27,407,408],{"class":33}," 200",[27,410,411],{"class":330}," ||",[27,413,414],{"class":37}," velocityY ",[27,416,405],{"class":330},[27,418,419],{"class":33}," 800",[27,421,422],{"class":37},") ",[27,424,425],{"class":352},"closeSheet",[27,427,428],{"class":37},"()\n",[27,430,431],{"class":29,"line":185},[27,432,433],{"class":37},"})\n",[10,435,436,437,311,440,314,443,446],{},"The element also receives them as ",[13,438,439],{},"kinesis:dragstart",[13,441,442],{},"kinesis:drag",[13,444,445],{},"kinesis:dragend"," DOM events.",[80,448,450],{"id":449},"keyboard","Keyboard",[10,452,453,454,457],{},"Arrow keys move a focused draggable element by 10px, or 50px with Shift, within its bounds. Kinesis doesn't make elements focusable. If dragging matters in your interface, add ",[13,455,456],{},"tabindex=\"0\""," and a label.",[80,459,461],{"id":460},"combining-with-other-effects","Combining with other effects",[10,463,464],{},"A draggable element can also tilt, pull magnetically, or react to hover. The drag offset adds on top.",[466,467,468],"style",{},"html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}",{"title":23,"searchDepth":57,"depth":57,"links":470},[471,472,473,474,475,476],{"id":82,"depth":41,"text":83},{"id":190,"depth":41,"text":191},{"id":246,"depth":41,"text":247},{"id":304,"depth":41,"text":305},{"id":449,"depth":41,"text":450},{"id":460,"depth":41,"text":461},"Draggable elements, bounds, and what happens on release.","md",{},"\u002Fdocs\u002Fdrag","---\ntitle: Drag\ndescription: Draggable elements, bounds, and what happens on release.\n---\n\n`--k-drag` makes an element draggable with mouse, touch, or pen.\n\n```css\n.sticker {\n  --k-drag: both;\n}\n```\n\n`x` or `y` limits dragging to one axis, for sliders and sheets. Kinesis sets `touch-action`, so a drag on a phone doesn't scroll the page, and a horizontal drag still lets the page scroll vertically.\n\n::demo{id=\"drag\"}\n::\n\n## Release\n\n`--k-release` sets what happens when you let go:\n\n| Value | Behavior |\n| --- | --- |\n| `throw` (default) | glides on with the release speed and comes to a stop |\n| `stay` | stops where you let go |\n| `return` | springs back home with the element's `--k-motion` |\n\n```css\n.pull-tab {\n  --k-drag: y;\n  --k-release: return;\n  --k-motion: bouncy;\n}\n```\n\n## Bounds\n\n`--k-bounds` keeps the element inside its `parent`, the `scope`, or the `viewport`. Dragging past the edge stretches elastically, and the element settles back inside on release.\n\n```css\n.puck {\n  --k-drag: both;\n  --k-bounds: parent;\n}\n```\n\n## Styling while dragging\n\nA dragged element has a `data-kinesis-dragging` attribute:\n\n```css\n.sticker { cursor: grab; }\n.sticker[data-kinesis-dragging] { cursor: grabbing; }\n```\n\nA drag doesn't count as a click, so draggable links and buttons don't fire when dropped.\n\n## Reacting in JavaScript\n\n`dragstart`, `drag`, and `dragend` receive the offset from the resting position and the pointer velocity:\n\n```js\nimport { kinesis } from \"@amineyarman\u002Fkinesis\"\n\nkinesis(document.querySelector(\".sheet\")).on(\"dragend\", ({ y, velocityY }) => {\n  if (y > 200 || velocityY > 800) closeSheet()\n})\n```\n\nThe element also receives them as `kinesis:dragstart`, `kinesis:drag`, and `kinesis:dragend` DOM events.\n\n## Keyboard\n\nArrow keys move a focused draggable element by 10px, or 50px with Shift, within its bounds. Kinesis doesn't make elements focusable. If dragging matters in your interface, add `tabindex=\"0\"` and a label.\n\n## Combining with other effects\n\nA draggable element can also tilt, pull magnetically, or react to hover. The drag offset adds on top.\n",{"title":5,"description":477},"docs\u002Fdrag","DU0lh4gCDpYPQoExZgp65DZfPGblycBouIQt9ryBX8I",1791309902832]