https://interactjs.io/assets/draggable.6468b780.js

1import{r as e,o as l,c as i,d as a,B as r,b as n,l as s,w as u,Q as t}from"./index.3be8783e.js";import"./modulepreload-polyfill.b7f2da20.js";const k={class:"markdown-body"},d=n("p",null,[s("Dragging is the simplest action interact.js provides. To make an element draggable, create an interactable with your desired target then call the "),n("code",null,"draggable"),s(" method with the options that you need.")],-1),g=t(`<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>draggable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Draggable Element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
2</code></pre><pre><code class="language-css"><span class="token selector">.draggable</span> <span class="token punctuation">{</span>
3  <span class="token property">touch-action</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
4  <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
5<span class="token punctuation">}</span>
6</code></pre><pre><code class="language-js"><span class="token keyword">const</span> position <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
7
8<span class="token function">interact</span><span class="token punctuation">(</span><span class="token string">&#39;.draggable&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
9  <span class="token literal-property property">listeners</span><span class="token operator">:</span> <span class="token punctuation">{</span>
10    <span class="token function">start</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
11      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>type<span class="token punctuation">,</span> event<span class="token punctuation">.</span>target<span class="token punctuation">)</span>
12    <span class="token punctuation">}</span><span class="token punctuation">,</span>
13    <span class="token function">move</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
14      position<span class="token punctuation">.</span>x <span class="token operator">+=</span> event<span class="token punctuation">.</span>dx
15      position<span class="token punctuation">.</span>y <span class="token operator">+=</span> event<span class="token punctuation">.</span>dy
16
17      event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">translate(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>position<span class="token punctuation">.</span>x<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>position<span class="token punctuation">.</span>y<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px)</span><span class="token template-punctuation string">\`</span></span>
18    <span class="token punctuation">}</span><span class="token punctuation">,</span>
19  <span class="token punctuation">}</span><span class="token punctuation">,</span>
20<span class="token punctuation">}</span><span class="token punctuation">)</span>
21</code></pre>`,3),h=n("code",null,"InteractEvent",-1),m=n("code",null,"dragmove",-1),_=t('<table class="table is-bordered"><thead><tr><th>

21Drag event property</th><th>Description</th></tr></thead><tbody><tr><td><code>dragEnter</code></td><td>The dropzone this Interactable was dragged over</td></tr><tr><td><code>dragLeave</code></td><td>The dropzone this Interactable was dragged out of</td></tr></tbody></table><p class="notice info">Remember to use CSS <code>touch-action: none</code> to prevent the browser from panning when the user drags with a touch pointer, and <code>user-select: none</code> to disable text selection.</p>',2),x={id:"lockaxis-and-startaxis",tabindex:"-1",class:"title is-3"},y=n("code",null,"lockAxis",-1),v=n("code",null,"startAxis",-1),b=t(`<pre><code class="language-javascript"><span class="token comment">// lock the drag to the starting direction</span>
22<span class="token function">interact</span><span class="token punctuation">(</span>singleAxisTarget<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
23  <span class="token literal-property property">startAxis</span><span class="token operator">:</span> <span class="token string">&#39;xy&#39;</span>
24  <span class="token literal-property property">lockAxis</span><span class="token operator">:</span> <span class="token string">&#39;start&#39;</span>
25<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
26
27<span class="token comment">// only drag if the drag was started horizontally</span>
28<span class="token function">interact</span><span class="token punctuation">(</span>horizontalTarget<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
29  <span class="token literal-property property">startAxis</span><span class="token operator">:</span> <span class="token string">&#39;x&#39;</span>
30  <span class="token literal-property property">lockAxis</span><span class="token operator">:</span> <span class="token string">&#39;x&#39;</span>
31<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
32</code></pre><p>There are two options for controlling the axis of drag actions: <code>startAxis</code> and <code>lockAxis</code>.</p><p><code>startAxis</code> sets the direction that the initial movement must be in for the action to start. Use <code>&#39;x&#39;</code> to require the user to start dragging horizontally or <code>&#39;y&#39;</code> to start dragging vertically.</p><p><code>lockAxis</code> causes the drag events to change only in the given axis. If a value of <code>&#39;start&#39;</code> is used, then the drag will be locked to the starting direction.</p>`,4),T="Draggable",L={__name:"draggable",setup(f,{expose:p}){return p({frontmatter:{title:"Draggable"}}),(A,D)=>{const c=e("LiveDemo"),o=e("IntExtLink");return l(),i("div",k,[d,a(c,{demoHtml:r(()=>import("./basic.bd1fdbb1.js"),[]),removeNext:3,"hide-demo-only":""},null,8,["demoHtml"]),g,n("p",null,[s("In addition to the common "),a(o,{to:"/docs/events#interactevents"},{default:u(()=>[h]),_:1}),s(" properties, "),m,s(" events also have:")]),_,n("h2",x,[a(o,{class:"header-anchor",to:"#lockaxis-and-startaxis"}),s(),y,s(" and "),v]),b])}}};export{L as default,T as title};
33//# sourceMappingURL=draggable.6468b780.js.map