UNPKG

interactjs/dist/api/Interactable.html

Version:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>Interactable - Documentation</title>
7
8    <script src="scripts/prettify/prettify.js"></script>
9    <script src="scripts/prettify/lang-css.js"></script>
10    <!--[if lt IE 9]>
11      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12    <![endif]-->
13    <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
14    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
16</head>
17<body>
18
19<input type="checkbox" id="nav-trigger" class="nav-trigger" />
20<label for="nav-trigger" class="navicon-button x">
21  <div class="navicon"></div>
22</label>
23
24<label for="nav-trigger" class="overlay"></label>
25
26<nav>
27    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="DropEvent_DropEvent.html">DropEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interactable.html">Interactable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#context">context</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#deltaSource">deltaSource</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#draggable">draggable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropCheck">dropCheck</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropzone">dropzone</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#fire">fire</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#gesturable">gesturable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#getRect">getRect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#off">off</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#on">on</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#origin">origin</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#rectChecker">rectChecker</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#reflow">reflow</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#resizable">resizable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#set">set</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#unset">unset</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="InteractEvent_InteractEvent.html">InteractEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interaction_Interaction.html">Interaction</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="module.exports_module.exports.html">exports</a></span></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-interact.html">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.isSet">isSet</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.maxInteractions">maxInteractions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.stop">stop</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsTouch">supportsTouch</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.use">use</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-modifiers_aspectRatio.html">modifiers/aspectRatio</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-modifiers_snapEdges.html">modifiers/snapEdges</a></span></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#interact">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#preventDefault">preventDefault</a></span></li>
28</nav>
29
30<div class="code-col-bg"></div>
31
32<div id="main">
33    
34    <h1 class="page-title">Interactable</h1>
35    
36
37    
38
39
40
41
42<section>
43
44<header>
45    
46        <h2>
47        Interactable
48        </h2>
49        
50    
51</header>
52
53<article>
54    <div class="container-overview">
55    
56        
57<div class="section-method">
58
59    
60
61    <h4 class="name" id="Interactable"><span class="type-signature"></span>new Interactable<span class="signature">()</span><span class="type-signature"></span></h4>
62
63    
64
65
66
67
68
69
70
71<dl class="details">
72
73    
74
75    
76
77    
78
79    
80
81    
82
83    
84
85    
86
87    
88
89    
90
91    
92
93    
94
95    
96
97    
98    <dt class="tag-source">Source:</dt>
99    <dd class="tag-source"><ul class="dummy"><li>
100        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line27">line 27</a>
101    </li></ul></dd>
102    
103
104    
105
106    
107
108    
109</dl>
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133</div>
134
135    
136    </div>
137
138    
139
140    
141
142    
143        <h3 class="subsection-title">Classes</h3>
144
145        <dl>
146            <dt><a href="Interactable.html">Interactable</a></dt>
147            <dd></dd>
148        </dl>
149    
150
151     
152
153    
154
155    
156        <h3 class="subsection-title">Members</h3>
157
158        
159            
160<div class="section-members">
161<h4 class="name" id="_defaults"><span class="type-signature"></span>_defaults<span class="type-signature"></span></h4>
162
163
164
165
166
167
168
169
170<dl class="details">
171
172    
173
174    
175
176    
177
178    
179
180    
181
182    
183
184    
185
186    
187
188    
189
190    
191
192    
193
194    
195
196    
197    <dt class="tag-source">Source:</dt>
198    <dd class="tag-source"><ul class="dummy"><li>
199        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line16">line 16</a>
200    </li></ul></dd>
201    
202
203    
204
205    
206
207    
208</dl>
209
210
211
212
213
214
215
216</div>
217
218        
219            
220<div class="section-members">
221<h4 class="name" id="actionChecker"><span class="type-signature"></span>actionChecker<span class="type-signature"></span></h4>
222
223
224
225
226<div class="description">
227    <pre class="prettyprint source lang-js"><code>interact('.resize-drag')
228  .resizable(true)
229  .draggable(true)
230  .actionChecker(function (pointer, event, action, interactable, element, interaction) {
231
232    if (interact.matchesSelector(event.target, '.drag-handle')) {
233      // force drag with handle target
234      action.name = drag
235    }
236    else {
237      // resize from the top and right edges
238      action.name  = 'resize'
239      action.edges = { top: true, right: true }
240    }
241
242    return action
243})
244</code></pre>
245<p>Returns or sets the function used to check action to be performed on
246pointerDown</p>
247</div>
248
249
250
251
252
253<dl class="details">
254
255    
256
257    
258
259    
260
261    
262
263    
264
265    
266
267    
268
269    
270
271    
272
273    
274
275    
276
277    
278
279    
280    <dt class="tag-source">Source:</dt>
281    <dd class="tag-source"><ul class="dummy"><li>
282        <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html">packages/@interactjs/auto-start/InteractableMethods.ts</a>, <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html#line108">line 108</a>
283    </li></ul></dd>
284    
285
286    
287
288    
289
290    
291</dl>
292
293
294
295
296
297
298
299</div>
300
301        
302            
303<div class="section-members">
304<h4 class="name" id="allowFrom"><span class="type-signature"></span>allowFrom<span class="type-signature"></span></h4>
305
306
307
308
309<div class="description">
310    <p>A drag/resize/gesture is started only If the target of the <code>mousedown</code>,
311<code>pointerdown</code> or <code>touchstart</code> event or any of it's parents match the given
312CSS selector or Element.</p>
313</div>
314
315
316
317
318
319<dl class="details">
320
321    
322
323    
324
325    
326
327    
328
329    
330
331    
332
333    
334
335    
336        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>Don't use this method. Instead set the `allowFrom` option for each action
337or for `pointerEvents`
338
339```js
340interact(targett)
341  .resizable({
342    allowFrom: '.resize-handle',
343  .pointerEvents({
344    allowFrom: '.handle',,
345  })
346```</li></ul></dd>
347    
348
349    
350
351    
352
353    
354
355    
356
357    
358    <dt class="tag-source">Source:</dt>
359    <dd class="tag-source"><ul class="dummy"><li>
360        <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html">packages/@interactjs/auto-start/InteractableMethods.ts</a>, <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html#line80">line 80</a>
361    </li></ul></dd>
362    
363
364    
365
366    
367
368    
369</dl>
370
371
372
373
374
375
376
377</div>
378
379        
380            
381<div class="section-members">
382<h4 class="name" id="ignoreFrom"><span class="type-signature"></span>ignoreFrom<span class="type-signature"></span></h4>
383
384
385
386
387<div class="description">
388    <p>If the target of the <code>mousedown</code>, <code>pointerdown</code> or <code>touchstart</code> event or any
389of it's parents match the given CSS selector or Element, no
390drag/resize/gesture is started.</p>
391</div>
392
393
394
395
396
397<dl class="details">
398
399    
400
401    
402
403    
404
405    
406
407    
408
409    
410
411    
412
413    
414        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>Don't use this method. Instead set the `ignoreFrom` option for each action
415or for `pointerEvents`
416
417```js
418interact(targett)
419  .draggable({
420    ignoreFrom: 'input, textarea, a[href]'',
421  })
422  .pointerEvents({
423    ignoreFrom: '[no-pointer]',
424  })
425```</li></ul></dd>
426    
427
428    
429
430    
431
432    
433
434    
435
436    
437    <dt class="tag-source">Source:</dt>
438    <dd class="tag-source"><ul class="dummy"><li>
439        <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html">packages/@interactjs/auto-start/InteractableMethods.ts</a>, <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html#line52">line 52</a>
440    </li></ul></dd>
441    
442
443    
444
445    
446
447    
448</dl>
449
450
451
452
453
454
455
456</div>
457
458        
459            
460<div class="section-members">
461<h4 class="name" id="preventDefault"><span class="type-signature"></span>preventDefault<span class="type-signature"></span></h4>
462
463
464
465
466<div class="description">
467    <p>Returns or sets whether to prevent the browser's default behaviour in
468response to pointer events. Can be set to:</p>
469<ul>
470<li><code>'always'</code> to always prevent</li>
471<li><code>'never'</code> to never prevent</li>
472<li><code>'auto'</code> to let interact.js try to determine what would be best</li>
473</ul>
474</div>
475
476
477
478
479
480<dl class="details">
481
482    
483
484    
485
486    
487
488    
489
490    
491
492    
493
494    
495
496    
497
498    
499
500    
501
502    
503
504    
505
506    
507    <dt class="tag-source">Source:</dt>
508    <dd class="tag-source"><ul class="dummy"><li>
509        <a href="packages_@interactjs_core_interactablePreventDefault.ts.html">packages/@interactjs/core/interactablePreventDefault.ts</a>, <a href="packages_@interactjs_core_interactablePreventDefault.ts.html#line83">line 83</a>
510    </li></ul></dd>
511    
512
513    
514
515    
516
517    
518</dl>
519
520
521
522
523
524
525
526</div>
527
528        
529            
530<div class="section-members">
531<h4 class="name" id="styleCursor"><span class="type-signature"></span>styleCursor<span class="type-signature"></span></h4>
532
533
534
535
536<div class="description">
537    <p>Returns or sets whether the the cursor should be changed depending on the
538action that would be performed if the mouse were pressed and dragged.</p>
539</div>
540
541
542
543
544
545<dl class="details">
546
547    
548
549    
550
551    
552
553    
554
555    
556
557    
558
559    
560
561    
562
563    
564
565    
566
567    
568
569    
570
571    
572    <dt class="tag-source">Source:</dt>
573    <dd class="tag-source"><ul class="dummy"><li>
574        <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html">packages/@interactjs/auto-start/InteractableMethods.ts</a>, <a href="packages_@interactjs_auto-start_InteractableMethods.ts.html#line141">line 141</a>
575    </li></ul></dd>
576    
577
578    
579
580    
581
582    
583</dl>
584
585
586
587
588
589
590
591</div>
592
593        
594    
595
596    
597        <h3 class="subsection-title">Methods</h3>
598
599        
600            
601<div class="section-method">
602
603    
604
605    <h4 class="name" id="context"><span class="type-signature"></span>context<span class="signature">()</span><span class="type-signature"> &rarr; {Node}</span></h4>
606
607    
608
609
610
611<div class="description">
612    <p>Gets the selector context Node of the Interactable. The default is
613<code>window.document</code>.</p>
614</div>
615
616
617
618
619
620<dl class="details">
621
622    
623
624    
625
626    
627
628    
629
630    
631
632    
633
634    
635
636    
637
638    
639
640    
641
642    
643
644    
645
646    
647    <dt class="tag-source">Source:</dt>
648    <dd class="tag-source"><ul class="dummy"><li>
649        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line243">line 243</a>
650    </li></ul></dd>
651    
652
653    
654
655    
656
657    
658</dl>
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680<div class="section-returns">
681<h5>Returns:</h5>
682
683        
684
685<dl class="param-type">
686    <dt>
687        Type:
688    </dt>
689    <dd>
690        
691<span class="param-type"><code>Node</code></span>
692
693
694    </dd>
695</dl>
696
697
698<div class="param-desc">
699    <p>The context Node of this Interactable</p>
700</div>
701
702    
703</div>
704
705
706
707</div>
708
709        
710            
711<div class="section-method">
712
713    
714
715    <h4 class="name" id="deltaSource"><span class="type-signature"></span>deltaSource<span class="signature">(newValue<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {string|object}</span></h4>
716
717    
718
719
720
721<div class="description">
722    <p>Returns or sets the mouse coordinate types used to calculate the
723movement of the pointer.</p>
724</div>
725
726
727
728
729
730<dl class="details">
731
732    
733
734    
735
736    
737
738    
739
740    
741
742    
743
744    
745
746    
747
748    
749
750    
751
752    
753
754    
755
756    
757    <dt class="tag-source">Source:</dt>
758    <dd class="tag-source"><ul class="dummy"><li>
759        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line223">line 223</a>
760    </li></ul></dd>
761    
762
763    
764
765    
766
767    
768</dl>
769
770
771
772
773
774
775
776
777
778    <h5>Parameters:</h5>
779    
780
781<table class="params">
782    <thead>
783    <tr>
784        
785        <th>Name</th>
786        
787
788        <th>Type</th>
789
790        
791        <th>Attributes</th>
792        
793
794        
795
796        <th class="last">Description</th>
797    </tr>
798    </thead>
799
800    <tbody>
801    
802
803        <tr>
804            
805                <td class="name"><code>newValue</code></td>
806            
807
808            <td class="type">
809            
810                
811<span class="param-type"><code>string</code></span>
812
813
814            
815            </td>
816
817            
818                <td class="attributes">
819                
820                    &lt;optional><br>
821                
822
823                
824
825                
826                </td>
827            
828
829            
830
831            <td class="param-description last">
832                <p>Use 'client' if you will be scrolling while
833interacting; Use 'page' if you want autoScroll to work</p>
834                
835            </td>
836        </tr>
837
838    
839    </tbody>
840</table>
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855<div class="section-returns">
856<h5>Returns:</h5>
857
858        
859
860<dl class="param-type">
861    <dt>
862        Type:
863    </dt>
864    <dd>
865        
866<span class="param-type"><code>string</code></span>
867|
868
869<span class="param-type"><code>object</code></span>
870
871
872    </dd>
873</dl>
874
875
876<div class="param-desc">
877    <p>The current deltaSource or this Interactable</p>
878</div>
879
880    
881</div>
882
883
884
885</div>
886
887        
888            
889<div class="section-method">
890
891    
892
893    <h4 class="name" id="draggable"><span class="type-signature"></span>draggable<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|<a href="Interactable.html">Interactable</a>}</span></h4>
894
895    
896
897
898
899<div class="description">
900    <pre class="prettyprint source lang-js"><code>interact(element).draggable({
901    onstart: function (event) {},
902    onmove : function (event) {},
903    onend  : function (event) {},
904
905    // the axis in which the first movement must be
906    // for the drag sequence to start
907    // 'xy' by default - any direction
908    startAxis: 'x' || 'y' || 'xy',
909
910    // 'xy' by default - don't restrict to one axis (move in any direction)
911    // 'x' or 'y' to restrict movement to either axis
912    // 'start' to restrict movement to the axis the drag started in
913    lockAxis: 'x' || 'y' || 'xy' || 'start',
914
915    // max number of drags that can happen concurrently
916    // with elements of this Interactable. Infinity by default
917    max: Infinity,
918
919    // max number of drags that can target the same element+Interactable
920    // 1 by default
921    maxPerElement: 2
922})
923
924var isDraggable = interact('element').draggable(); // true
925</code></pre>
926<p>Get or set whether drag actions can be performed on the target</p>
927</div>
928
929
930
931
932
933<dl class="details">
934
935    
936
937    
938
939    
940
941    
942
943    
944
945    
946
947    
948
949    
950
951    
952
953    
954
955    
956
957    
958
959    
960    <dt class="tag-source">Source:</dt>
961    <dd class="tag-source"><ul class="dummy"><li>
962        <a href="packages_@interactjs_actions_drag_plugin.ts.html">packages/@interactjs/actions/drag/plugin.ts</a>, <a href="packages_@interactjs_actions_drag_plugin.ts.html#line74">line 74</a>
963    </li></ul></dd>
964    
965
966    
967
968    
969
970    
971</dl>
972
973
974
975
976
977
978
979
980
981    <h5>Parameters:</h5>
982    
983
984<table class="params">
985    <thead>
986    <tr>
987        
988        <th>Name</th>
989        
990
991        <th>Type</th>
992
993        
994        <th>Attributes</th>
995        
996
997        
998
999        <th class="last">Description</th>
1000    </tr>
1001    </thead>
1002
1003    <tbody>
1004    
1005
1006        <tr>
1007            
1008                <td class="name"><code>options</code></td>
1009            
1010
1011            <td class="type">
1012            
1013                
1014<span class="param-type"><code>boolean</code></span>
1015|
1016
1017<span class="param-type"><code>object</code></span>
1018
1019
1020            
1021            </td>
1022
1023            
1024                <td class="attributes">
1025                
1026                    &lt;optional><br>
1027                
1028
1029                
1030
1031                
1032                </td>
1033            
1034
1035            
1036
1037            <td class="param-description last">
1038                <p>true/false or An object with event
1039listeners to be fired on drag events (object makes the Interactable
1040draggable)</p>
1041                
1042            </td>
1043        </tr>
1044
1045    
1046    </tbody>
1047</table>
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062<div class="section-returns">
1063<h5>Returns:</h5>
1064
1065        
1066
1067<dl class="param-type">
1068    <dt>
1069        Type:
1070    </dt>
1071    <dd>
1072        
1073<span class="param-type"><code>boolean</code></span>
1074|
1075
1076<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
1077
1078
1079    </dd>
1080</dl>
1081
1082
1083<div class="param-desc">
1084    <p>boolean indicating if this can be the
1085target of drag events, or this Interctable</p>
1086</div>
1087
1088    
1089</div>
1090
1091
1092
1093</div>
1094
1095        
1096            
1097<div class="section-method">
1098
1099    
1100
1101    <h4 class="name" id="dropCheck"><span class="type-signature"></span>dropCheck<span class="signature">()</span><span class="type-signature"></span></h4>
1102
1103    
1104
1105
1106
1107<div class="description">
1108    <pre class="prettyprint source lang-js"><code>interact(target)
1109.dropChecker(function(dragEvent,         // related dragmove or dragend event
1110                      event,             // TouchEvent/PointerEvent/MouseEvent
1111                      dropped,           // bool result of the default checker
1112                      dropzone,          // dropzone Interactable
1113                      dropElement,       // dropzone elemnt
1114                      draggable,         // draggable Interactable
1115                      draggableElement) {// draggable element
1116
1117  return dropped && event.target.hasAttribute('allow-drop')
1118}
1119</code></pre>
1120</div>
1121
1122
1123
1124
1125
1126<dl class="details">
1127
1128    
1129
1130    
1131
1132    
1133
1134    
1135
1136    
1137
1138    
1139
1140    
1141
1142    
1143
1144    
1145
1146    
1147
1148    
1149
1150    
1151
1152    
1153    <dt class="tag-source">Source:</dt>
1154    <dd class="tag-source"><ul class="dummy"><li>
1155        <a href="packages_@interactjs_actions_drop_plugin.ts.html">packages/@interactjs/actions/drop/plugin.ts</a>, <a href="packages_@interactjs_actions_drop_plugin.ts.html#line167">line 167</a>
1156    </li></ul></dd>
1157    
1158
1159    
1160
1161    
1162
1163    
1164</dl>
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188</div>
1189
1190        
1191            
1192<div class="section-method">
1193
1194    
1195
1196    <h4 class="name" id="dropzone"><span class="type-signature"></span>dropzone<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {object|<a href="Interactable.html">Interactable</a>}</span></h4>
1197
1198    
1199
1200
1201
1202<div class="description">
1203    <pre class="prettyprint source lang-js"><code>interact('.drop').dropzone({
1204  accept: '.can-drop' || document.getElementById('single-drop'),
1205  overlap: 'pointer' || 'center' || zeroToOne
1206}
1207</code></pre>
1208<p>Returns or sets whether draggables can be dropped onto this target to
1209trigger drop events</p>
1210<p>Dropzones can receive the following events:</p>
1211<ul>
1212<li><code>dropactivate</code> and <code>dropdeactivate</code> when an acceptable drag starts and ends</li>
1213<li><code>dragenter</code> and <code>dragleave</code> when a draggable enters and leaves the dropzone</li>
1214<li><code>dragmove</code> when a draggable that has entered the dropzone is moved</li>
1215<li><code>drop</code> when a draggable is dropped into this dropzone</li>
1216</ul>
1217<p>Use the <code>accept</code> option to allow only elements that match the given CSS
1218selector or element. The value can be:</p>
1219<ul>
1220<li><strong>an Element</strong> - only that element can be dropped into this dropzone.</li>
1221<li><strong>a string</strong>, - the element being dragged must match it as a CSS selector.</li>
1222<li><strong><code>null</code></strong> - accept options is cleared - it accepts any element.</li>
1223</ul>
1224<p>Use the <code>overlap</code> option to set how drops are checked for. The allowed
1225values are:</p>
1226<ul>
1227<li><code>'pointer'</code>, the pointer must be over the dropzone (default)</li>
1228<li><code>'center'</code>, the draggable element's center must be over the dropzone</li>
1229<li>a number from 0-1 which is the <code>(intersection area) / (draggable area)</code>.
1230e.g. <code>0.5</code> for drop to happen when half of the area of the draggable is
1231over the dropzone</li>
1232</ul>
1233<p>Use the <code>checker</code> option to specify a function to check if a dragged element
1234is over this Interactable.</p>
1235</div>
1236
1237
1238
1239
1240
1241<dl class="details">
1242
1243    
1244
1245    
1246
1247    
1248
1249    
1250
1251    
1252
1253    
1254
1255    
1256
1257    
1258
1259    
1260
1261    
1262
1263    
1264
1265    
1266
1267    
1268    <dt class="tag-source">Source:</dt>
1269    <dd class="tag-source"><ul class="dummy"><li>
1270        <a href="packages_@interactjs_actions_drop_plugin.ts.html">packages/@interactjs/actions/drop/plugin.ts</a>, <a href="packages_@interactjs_actions_drop_plugin.ts.html#line123">line 123</a>
1271    </li></ul></dd>
1272    
1273
1274    
1275
1276    
1277
1278    
1279</dl>
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289    <h5>Parameters:</h5>
1290    
1291
1292<table class="params">
1293    <thead>
1294    <tr>
1295        
1296        <th>Name</th>
1297        
1298
1299        <th>Type</th>
1300
1301        
1302        <th>Attributes</th>
1303        
1304
1305        
1306
1307        <th class="last">Description</th>
1308    </tr>
1309    </thead>
1310
1311    <tbody>
1312    
1313
1314        <tr>
1315            
1316                <td class="name"><code>options</code></td>
1317            
1318
1319            <td class="type">
1320            
1321                
1322<span class="param-type"><code>boolean</code></span>
1323|
1324
1325<span class="param-type"><code>object</code></span>
1326|
1327
1328<span class="param-type"><code>null</code></span>
1329
1330
1331            
1332            </td>
1333
1334            
1335                <td class="attributes">
1336                
1337                    &lt;optional><br>
1338                
1339
1340                
1341
1342                
1343                </td>
1344            
1345
1346            
1347
1348            <td class="param-description last">
1349                <p>The new options to be set.</p>
1350                
1351            </td>
1352        </tr>
1353
1354    
1355    </tbody>
1356</table>
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371<div class="section-returns">
1372<h5>Returns:</h5>
1373
1374        
1375
1376<dl class="param-type">
1377    <dt>
1378        Type:
1379    </dt>
1380    <dd>
1381        
1382<span class="param-type"><code>object</code></span>
1383|
1384
1385<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
1386
1387
1388    </dd>
1389</dl>
1390
1391
1392<div class="param-desc">
1393    <p>The current setting or this Interactable</p>
1394</div>
1395
1396    
1397</div>
1398
1399
1400
1401</div>
1402
1403        
1404            
1405<div class="section-method">
1406
1407    
1408
1409    <h4 class="name" id="fire"><span class="type-signature"></span>fire<span class="signature">(iEvent)</span><span class="type-signature"> &rarr; {<a href="Interactable.html">Interactable</a>}</span></h4>
1410
1411    
1412
1413
1414
1415<div class="description">
1416    <p>Calls listeners for the given InteractEvent type bound globally
1417and directly to this Interactable</p>
1418</div>
1419
1420
1421
1422
1423
1424<dl class="details">
1425
1426    
1427
1428    
1429
1430    
1431
1432    
1433
1434    
1435
1436    
1437
1438    
1439
1440    
1441
1442    
1443
1444    
1445
1446    
1447
1448    
1449
1450    
1451    <dt class="tag-source">Source:</dt>
1452    <dd class="tag-source"><ul class="dummy"><li>
1453        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line301">line 301</a>
1454    </li></ul></dd>
1455    
1456
1457    
1458
1459    
1460
1461    
1462</dl>
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472    <h5>Parameters:</h5>
1473    
1474
1475<table class="params">
1476    <thead>
1477    <tr>
1478        
1479        <th>Name</th>
1480        
1481
1482        <th>Type</th>
1483
1484        
1485
1486        
1487
1488        <th class="last">Description</th>
1489    </tr>
1490    </thead>
1491
1492    <tbody>
1493    
1494
1495        <tr>
1496            
1497                <td class="name"><code>iEvent</code></td>
1498            
1499
1500            <td class="type">
1501            
1502                
1503<span class="param-type"><code><a href="InteractEvent.html">InteractEvent</a></code></span>
1504
1505
1506            
1507            </td>
1508
1509            
1510
1511            
1512
1513            <td class="param-description last">
1514                <p>The InteractEvent object to be fired on this
1515Interactable</p>
1516                
1517            </td>
1518        </tr>
1519
1520    
1521    </tbody>
1522</table>
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537<div class="section-returns">
1538<h5>Returns:</h5>
1539
1540        
1541
1542<dl class="param-type">
1543    <dt>
1544        Type:
1545    </dt>
1546    <dd>
1547        
1548<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
1549
1550
1551    </dd>
1552</dl>
1553
1554
1555<div class="param-desc">
1556    <p>this Interactable</p>
1557</div>
1558
1559    
1560</div>
1561
1562
1563
1564</div>
1565
1566        
1567            
1568<div class="section-method">
1569
1570    
1571
1572    <h4 class="name" id="gesturable"><span class="type-signature"></span>gesturable<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|<a href="Interactable.html">Interactable</a>}</span></h4>
1573
1574    
1575
1576
1577
1578<div class="description">
1579    <pre class="prettyprint source lang-js"><code>interact(element).gesturable({
1580    onstart: function (event) {},
1581    onmove : function (event) {},
1582    onend  : function (event) {},
1583
1584    // limit multiple gestures.
1585    // See the explanation in <code>Interactable.draggable</code> example
1586    max: Infinity,
1587    maxPerElement: 1,
1588})
1589
1590var isGestureable = interact(element).gesturable()
1591</code></pre>
1592<p>Gets or sets whether multitouch gestures can be performed on the target</p>
1593</div>
1594
1595
1596
1597
1598
1599<dl class="details">
1600
1601    
1602
1603    
1604
1605    
1606
1607    
1608
1609    
1610
1611    
1612
1613    
1614
1615    
1616
1617    
1618
1619    
1620
1621    
1622
1623    
1624
1625    
1626    <dt class="tag-source">Source:</dt>
1627    <dd class="tag-source"><ul class="dummy"><li>
1628        <a href="packages_@interactjs_actions_gesture_plugin.ts.html">packages/@interactjs/actions/gesture/plugin.ts</a>, <a href="packages_@interactjs_actions_gesture_plugin.ts.html#line59">line 59</a>
1629    </li></ul></dd>
1630    
1631
1632    
1633
1634    
1635
1636    
1637</dl>
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647    <h5>Parameters:</h5>
1648    
1649
1650<table class="params">
1651    <thead>
1652    <tr>
1653        
1654        <th>Name</th>
1655        
1656
1657        <th>Type</th>
1658
1659        
1660        <th>Attributes</th>
1661        
1662
1663        
1664
1665        <th class="last">Description</th>
1666    </tr>
1667    </thead>
1668
1669    <tbody>
1670    
1671
1672        <tr>
1673            
1674                <td class="name"><code>options</code></td>
1675            
1676
1677            <td class="type">
1678            
1679                
1680<span class="param-type"><code>boolean</code></span>
1681|
1682
1683<span class="param-type"><code>object</code></span>
1684
1685
1686            
1687            </td>
1688
1689            
1690                <td class="attributes">
1691                
1692                    &lt;optional><br>
1693                
1694
1695                
1696
1697                
1698                </td>
1699            
1700
1701            
1702
1703            <td class="param-description last">
1704                <p>true/false or An object with event
1705listeners to be fired on gesture events (makes the Interactable gesturable)</p>
1706                
1707            </td>
1708        </tr>
1709
1710    
1711    </tbody>
1712</table>
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727<div class="section-returns">
1728<h5>Returns:</h5>
1729
1730        
1731
1732<dl class="param-type">
1733    <dt>
1734        Type:
1735    </dt>
1736    <dd>
1737        
1738<span class="param-type"><code>boolean</code></span>
1739|
1740
1741<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
1742
1743
1744    </dd>
1745</dl>
1746
1747
1748<div class="param-desc">
1749    <p>A boolean indicating if this can be the
1750target of gesture events, or this Interactable</p>
1751</div>
1752
1753    
1754</div>
1755
1756
1757
1758</div>
1759
1760        
1761            
1762<div class="section-method">
1763
1764    
1765
1766    <h4 class="name" id="getRect"><span class="type-signature"></span>getRect<span class="signature">(element<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Rect}</span></h4>
1767
1768    
1769
1770
1771
1772<div class="description">
1773    <p>The default function to get an Interactables bounding rect. Can be
1774overridden using <code>Interactable.rectChecker</code>.</p>
1775</div>
1776
1777
1778
1779
1780
1781<dl class="details">
1782
1783    
1784
1785    
1786
1787    
1788
1789    
1790
1791    
1792
1793    
1794
1795    
1796
1797    
1798
1799    
1800
1801    
1802
1803    
1804
1805    
1806
1807    
1808    <dt class="tag-source">Source:</dt>
1809    <dd class="tag-source"><ul class="dummy"><li>
1810        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line140">line 140</a>
1811    </li></ul></dd>
1812    
1813
1814    
1815
1816    
1817
1818    
1819</dl>
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829    <h5>Parameters:</h5>
1830    
1831
1832<table class="params">
1833    <thead>
1834    <tr>
1835        
1836        <th>Name</th>
1837        
1838
1839        <th>Type</th>
1840
1841        
1842        <th>Attributes</th>
1843        
1844
1845        
1846
1847        <th class="last">Description</th>
1848    </tr>
1849    </thead>
1850
1851    <tbody>
1852    
1853
1854        <tr>
1855            
1856                <td class="name"><code>element</code></td>
1857            
1858
1859            <td class="type">
1860            
1861                
1862<span class="param-type"><code>Element</code></span>
1863
1864
1865            
1866            </td>
1867
1868            
1869                <td class="attributes">
1870                
1871                    &lt;optional><br>
1872                
1873
1874                
1875
1876                
1877                </td>
1878            
1879
1880            
1881
1882            <td class="param-description last">
1883                <p>The element to measure.</p>
1884                
1885            </td>
1886        </tr>
1887
1888    
1889    </tbody>
1890</table>
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905<div class="section-returns">
1906<h5>Returns:</h5>
1907
1908        
1909
1910<dl class="param-type">
1911    <dt>
1912        Type:
1913    </dt>
1914    <dd>
1915        
1916<span class="param-type"><code>Rect</code></span>
1917
1918
1919    </dd>
1920</dl>
1921
1922
1923<div class="param-desc">
1924    <p>The object's bounding rectangle.</p>
1925</div>
1926
1927    
1928</div>
1929
1930
1931
1932</div>
1933
1934        
1935            
1936<div class="section-method">
1937
1938    
1939
1940    <h4 class="name" id="off"><span class="type-signature"></span>off<span class="signature">(types, listener<span class="signature-attributes">opt</span>, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="Interactable.html">Interactable</a>}</span></h4>
1941
1942    
1943
1944
1945
1946<div class="description">
1947    <p>Removes an InteractEvent, pointerEvent or DOM event listener.</p>
1948</div>
1949
1950
1951
1952
1953
1954<dl class="details">
1955
1956    
1957
1958    
1959
1960    
1961
1962    
1963
1964    
1965
1966    
1967
1968    
1969
1970    
1971
1972    
1973
1974    
1975
1976    
1977
1978    
1979
1980    
1981    <dt class="tag-source">Source:</dt>
1982    <dd class="tag-source"><ul class="dummy"><li>
1983        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line368">line 368</a>
1984    </li></ul></dd>
1985    
1986
1987    
1988
1989    
1990
1991    
1992</dl>
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002    <h5>Parameters:</h5>
2003    
2004
2005<table class="params">
2006    <thead>
2007    <tr>
2008        
2009        <th>Name</th>
2010        
2011
2012        <th>Type</th>
2013
2014        
2015        <th>Attributes</th>
2016        
2017
2018        
2019
2020        <th class="last">Description</th>
2021    </tr>
2022    </thead>
2023
2024    <tbody>
2025    
2026
2027        <tr>
2028            
2029                <td class="name"><code>types</code></td>
2030            
2031
2032            <td class="type">
2033            
2034                
2035<span class="param-type"><code>string</code></span>
2036|
2037
2038<span class="param-type"><code>array</code></span>
2039|
2040
2041<span class="param-type"><code>object</code></span>
2042
2043
2044            
2045            </td>
2046
2047            
2048                <td class="attributes">
2049                
2050
2051                
2052
2053                
2054                </td>
2055            
2056
2057            
2058
2059            <td class="param-description last">
2060                <p>The types of events that were
2061listened for</p>
2062                
2063            </td>
2064        </tr>
2065
2066    
2067
2068        <tr>
2069            
2070                <td class="name"><code>listener</code></td>
2071            
2072
2073            <td class="type">
2074            
2075                
2076<span class="param-type"><code>function</code></span>
2077|
2078
2079<span class="param-type"><code>array</code></span>
2080|
2081
2082<span class="param-type"><code>object</code></span>
2083
2084
2085            
2086            </td>
2087
2088            
2089                <td class="attributes">
2090                
2091                    &lt;optional><br>
2092                
2093
2094                
2095
2096                
2097                </td>
2098            
2099
2100            
2101
2102            <td class="param-description last">
2103                <p>The event listener function(s)</p>
2104                
2105            </td>
2106        </tr>
2107
2108    
2109
2110        <tr>
2111            
2112                <td class="name"><code>options</code></td>
2113            
2114
2115            <td class="type">
2116            
2117                
2118<span class="param-type"><code>object</code></span>
2119|
2120
2121<span class="param-type"><code>boolean</code></span>
2122
2123
2124            
2125            </td>
2126
2127            
2128                <td class="attributes">
2129                
2130                    &lt;optional><br>
2131                
2132
2133                
2134
2135                
2136                </td>
2137            
2138
2139            
2140
2141            <td class="param-description last">
2142                <p>options object or useCapture flag for
2143removeEventListener</p>
2144                
2145            </td>
2146        </tr>
2147
2148    
2149    </tbody>
2150</table>
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165<div class="section-returns">
2166<h5>Returns:</h5>
2167
2168        
2169
2170<dl class="param-type">
2171    <dt>
2172        Type:
2173    </dt>
2174    <dd>
2175        
2176<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
2177
2178
2179    </dd>
2180</dl>
2181
2182
2183<div class="param-desc">
2184    <p>This Interactable</p>
2185</div>
2186
2187    
2188</div>
2189
2190
2191
2192</div>
2193
2194        
2195            
2196<div class="section-method">
2197
2198    
2199
2200    <h4 class="name" id="on"><span class="type-signature"></span>on<span class="signature">(types, listener<span class="signature-attributes">opt</span>, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="Interactable.html">Interactable</a>}</span></h4>
2201
2202    
2203
2204
2205
2206<div class="description">
2207    <p>Binds a listener for an InteractEvent, pointerEvent or DOM event.</p>
2208</div>
2209
2210
2211
2212
2213
2214<dl class="details">
2215
2216    
2217
2218    
2219
2220    
2221
2222    
2223
2224    
2225
2226    
2227
2228    
2229
2230    
2231
2232    
2233
2234    
2235
2236    
2237
2238    
2239
2240    
2241    <dt class="tag-source">Source:</dt>
2242    <dd class="tag-source"><ul class="dummy"><li>
2243        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line354">line 354</a>
2244    </li></ul></dd>
2245    
2246
2247    
2248
2249    
2250
2251    
2252</dl>
2253
2254
2255
2256
2257
2258
2259
2260
2261
2262    <h5>Parameters:</h5>
2263    
2264
2265<table class="params">
2266    <thead>
2267    <tr>
2268        
2269        <th>Name</th>
2270        
2271
2272        <th>Type</th>
2273
2274        
2275        <th>Attributes</th>
2276        
2277
2278        
2279
2280        <th class="last">Description</th>
2281    </tr>
2282    </thead>
2283
2284    <tbody>
2285    
2286
2287        <tr>
2288            
2289                <td class="name"><code>types</code></td>
2290            
2291
2292            <td class="type">
2293            
2294                
2295<span class="param-type"><code>string</code></span>
2296|
2297
2298<span class="param-type"><code>array</code></span>
2299|
2300
2301<span class="param-type"><code>object</code></span>
2302
2303
2304            
2305            </td>
2306
2307            
2308                <td class="attributes">
2309                
2310
2311                
2312
2313                
2314                </td>
2315            
2316
2317            
2318
2319            <td class="param-description last">
2320                <p>The types of events to listen
2321for</p>
2322                
2323            </td>
2324        </tr>
2325
2326    
2327
2328        <tr>
2329            
2330                <td class="name"><code>listener</code></td>
2331            
2332
2333            <td class="type">
2334            
2335                
2336<span class="param-type"><code>function</code></span>
2337|
2338
2339<span class="param-type"><code>array</code></span>
2340|
2341
2342<span class="param-type"><code>object</code></span>
2343
2344
2345            
2346            </td>
2347
2348            
2349                <td class="attributes">
2350                
2351                    &lt;optional><br>
2352                
2353
2354                
2355
2356                
2357                </td>
2358            
2359
2360            
2361
2362            <td class="param-description last">
2363                <p>The event listener function(s)</p>
2364                
2365            </td>
2366        </tr>
2367
2368    
2369
2370        <tr>
2371            
2372                <td class="name"><code>options</code></td>
2373            
2374
2375            <td class="type">
2376            
2377                
2378<span class="param-type"><code>object</code></span>
2379|
2380
2381<span class="param-type"><code>boolean</code></span>
2382
2383
2384            
2385            </td>
2386
2387            
2388                <td class="attributes">
2389                
2390                    &lt;optional><br>
2391                
2392
2393                
2394
2395                
2396                </td>
2397            
2398
2399            
2400
2401            <td class="param-description last">
2402                <p>options object or useCapture flag for
2403addEventListener</p>
2404                
2405            </td>
2406        </tr>
2407
2408    
2409    </tbody>
2410</table>
2411
2412
2413
2414
2415
2416
2417
2418
2419
2420
2421
2422
2423
2424
2425<div class="section-returns">
2426<h5>Returns:</h5>
2427
2428        
2429
2430<dl class="param-type">
2431    <dt>
2432        Type:
2433    </dt>
2434    <dd>
2435        
2436<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
2437
2438
2439    </dd>
2440</dl>
2441
2442
2443<div class="param-desc">
2444    <p>This Interactable</p>
2445</div>
2446
2447    
2448</div>
2449
2450
2451
2452</div>
2453
2454        
2455            
2456<div class="section-method">
2457
2458    
2459
2460    <h4 class="name" id="origin"><span class="type-signature"></span>origin<span class="signature">(origin<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
2461
2462    
2463
2464
2465
2466<div class="description">
2467    <p>Gets or sets the origin of the Interactable's element.  The x and y
2468of the origin will be subtracted from action event coordinates.</p>
2469</div>
2470
2471
2472
2473
2474
2475<dl class="details">
2476
2477    
2478
2479    
2480
2481    
2482
2483    
2484
2485    
2486
2487    
2488
2489    
2490
2491    
2492
2493    
2494
2495    
2496
2497    
2498
2499    
2500
2501    
2502    <dt class="tag-source">Source:</dt>
2503    <dd class="tag-source"><ul class="dummy"><li>
2504        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line209">line 209</a>
2505    </li></ul></dd>
2506    
2507
2508    
2509
2510    
2511
2512    
2513</dl>
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523    <h5>Parameters:</h5>
2524    
2525
2526<table class="params">
2527    <thead>
2528    <tr>
2529        
2530        <th>Name</th>
2531        
2532
2533        <th>Type</th>
2534
2535        
2536        <th>Attributes</th>
2537        
2538
2539        
2540
2541        <th class="last">Description</th>
2542    </tr>
2543    </thead>
2544
2545    <tbody>
2546    
2547
2548        <tr>
2549            
2550                <td class="name"><code>origin</code></td>
2551            
2552
2553            <td class="type">
2554            
2555                
2556<span class="param-type"><code>Element</code></span>
2557|
2558
2559<span class="param-type"><code>object</code></span>
2560|
2561
2562<span class="param-type"><code>string</code></span>
2563
2564
2565            
2566            </td>
2567
2568            
2569                <td class="attributes">
2570                
2571                    &lt;optional><br>
2572                
2573
2574                
2575
2576                
2577                </td>
2578            
2579
2580            
2581
2582            <td class="param-description last">
2583                <p>An HTML or SVG Element whose
2584rect will be used, an object eg. { x: 0, y: 0 } or string 'parent', 'self'
2585or any CSS selector</p>
2586                
2587            </td>
2588        </tr>
2589
2590    
2591    </tbody>
2592</table>
2593
2594
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606
2607<div class="section-returns">
2608<h5>Returns:</h5>
2609
2610        
2611
2612<dl class="param-type">
2613    <dt>
2614        Type:
2615    </dt>
2616    <dd>
2617        
2618<span class="param-type"><code>object</code></span>
2619
2620
2621    </dd>
2622</dl>
2623
2624
2625<div class="param-desc">
2626    <p>The current origin or this Interactable</p>
2627</div>
2628
2629    
2630</div>
2631
2632
2633
2634</div>
2635
2636        
2637            
2638<div class="section-method">
2639
2640    
2641
2642    <h4 class="name" id="rectChecker"><span class="type-signature"></span>rectChecker<span class="signature">(checker<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {function|object}</span></h4>
2643
2644    
2645
2646
2647
2648<div class="description">
2649    <p>Returns or sets the function used to calculate the interactable's
2650element's rectangle</p>
2651</div>
2652
2653
2654
2655
2656
2657<dl class="details">
2658
2659    
2660
2661    
2662
2663    
2664
2665    
2666
2667    
2668
2669    
2670
2671    
2672
2673    
2674
2675    
2676
2677    
2678
2679    
2680
2681    
2682
2683    
2684    <dt class="tag-source">Source:</dt>
2685    <dd class="tag-source"><ul class="dummy"><li>
2686        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line157">line 157</a>
2687    </li></ul></dd>
2688    
2689
2690    
2691
2692    
2693
2694    
2695</dl>
2696
2697
2698
2699
2700
2701
2702
2703
2704
2705    <h5>Parameters:</h5>
2706    
2707
2708<table class="params">
2709    <thead>
2710    <tr>
2711        
2712        <th>Name</th>
2713        
2714
2715        <th>Type</th>
2716
2717        
2718        <th>Attributes</th>
2719        
2720
2721        
2722
2723        <th class="last">Description</th>
2724    </tr>
2725    </thead>
2726
2727    <tbody>
2728    
2729
2730        <tr>
2731            
2732                <td class="name"><code>checker</code></td>
2733            
2734
2735            <td class="type">
2736            
2737                
2738<span class="param-type"><code>function</code></span>
2739
2740
2741            
2742            </td>
2743
2744            
2745                <td class="attributes">
2746                
2747                    &lt;optional><br>
2748                
2749
2750                
2751
2752                
2753                </td>
2754            
2755
2756            
2757
2758            <td class="param-description last">
2759                <p>A function which returns this Interactable's
2760bounding rectangle. See <code>Interactable.getRect</code></p>
2761                
2762            </td>
2763        </tr>
2764
2765    
2766    </tbody>
2767</table>
2768
2769
2770
2771
2772
2773
2774
2775
2776
2777
2778
2779
2780
2781
2782<div class="section-returns">
2783<h5>Returns:</h5>
2784
2785        
2786
2787<dl class="param-type">
2788    <dt>
2789        Type:
2790    </dt>
2791    <dd>
2792        
2793<span class="param-type"><code>function</code></span>
2794|
2795
2796<span class="param-type"><code>object</code></span>
2797
2798
2799    </dd>
2800</dl>
2801
2802
2803<div class="param-desc">
2804    <p>The checker function or this Interactable</p>
2805</div>
2806
2807    
2808</div>
2809
2810
2811
2812</div>
2813
2814        
2815            
2816<div class="section-method">
2817
2818    
2819
2820    <h4 class="name" id="reflow"><span class="type-signature"></span>reflow<span class="signature">(action)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
2821
2822    
2823
2824
2825
2826<div class="description">
2827    <pre class="prettyprint source lang-js"><code>const interactable = interact(target)
2828const drag = { name: drag, axis: 'x' }
2829const resize = { name: resize, edges: { left: true, bottom: true }
2830
2831interactable.reflow(drag)
2832interactable.reflow(resize)
2833</code></pre>
2834<p>Start an action sequence to re-apply modifiers, check drops, etc.</p>
2835</div>
2836
2837
2838
2839
2840
2841<dl class="details">
2842
2843    
2844
2845    
2846
2847    
2848
2849    
2850
2851    
2852
2853    
2854
2855    
2856
2857    
2858
2859    
2860
2861    
2862
2863    
2864
2865    
2866
2867    
2868    <dt class="tag-source">Source:</dt>
2869    <dd class="tag-source"><ul class="dummy"><li>
2870        <a href="packages_@interactjs_reflow_plugin.ts.html">packages/@interactjs/reflow/plugin.ts</a>, <a href="packages_@interactjs_reflow_plugin.ts.html#line46">line 46</a>
2871    </li></ul></dd>
2872    
2873
2874    
2875
2876    
2877
2878    
2879</dl>
2880
2881
2882
2883
2884
2885
2886
2887
2888
2889    <h5>Parameters:</h5>
2890    
2891
2892<table class="params">
2893    <thead>
2894    <tr>
2895        
2896        <th>Name</th>
2897        
2898
2899        <th>Type</th>
2900
2901        
2902
2903        
2904
2905        <th class="last">Description</th>
2906    </tr>
2907    </thead>
2908
2909    <tbody>
2910    
2911
2912        <tr>
2913            
2914                <td class="name"><code>action</code></td>
2915            
2916
2917            <td class="type">
2918            
2919                
2920<span class="param-type"><code>Object</code></span>
2921
2922
2923            
2924            </td>
2925
2926            
2927
2928            
2929
2930            <td class="param-description last">
2931                <p>The action to begin</p>
2932                
2933                    
2934
2935<table class="params">
2936    <thead>
2937    <tr>
2938        
2939        <th>Name</th>
2940        
2941
2942        <th>Type</th>
2943
2944        
2945
2946        
2947
2948        <th class="last">Description</th>
2949    </tr>
2950    </thead>
2951
2952    <tbody>
2953    
2954
2955        <tr>
2956            
2957                <td class="name"><code>name</code></td>
2958            
2959
2960            <td class="type">
2961            
2962                
2963<span class="param-type"><code>string</code></span>
2964
2965
2966            
2967            </td>
2968
2969            
2970
2971            
2972
2973            <td class="param-description last">
2974                <p>The name of the action</p>
2975                
2976            </td>
2977        </tr>
2978
2979    
2980    </tbody>
2981</table>
2982
2983                
2984            </td>
2985        </tr>
2986
2987    
2988    </tbody>
2989</table>
2990
2991
2992
2993
2994
2995
2996
2997
2998
2999
3000
3001
3002
3003
3004<div class="section-returns">
3005<h5>Returns:</h5>
3006
3007        
3008
3009<dl class="param-type">
3010    <dt>
3011        Type:
3012    </dt>
3013    <dd>
3014        
3015<span class="param-type"><code>Promise</code></span>
3016
3017
3018    </dd>
3019</dl>
3020
3021
3022<div class="param-desc">
3023    <p>A promise that resolves to the <code>Interactable</code> when actions on all targets have ended</p>
3024</div>
3025
3026    
3027</div>
3028
3029
3030
3031</div>
3032
3033        
3034            
3035<div class="section-method">
3036
3037    
3038
3039    <h4 class="name" id="resizable"><span class="type-signature"></span>resizable<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|<a href="Interactable.html">Interactable</a>}</span></h4>
3040
3041    
3042
3043
3044
3045<div class="description">
3046    <pre class="prettyprint source lang-js"><code>interact(element).resizable({
3047  onstart: function (event) {},
3048  onmove : function (event) {},
3049  onend  : function (event) {},
3050
3051  edges: {
3052    top   : true,       // Use pointer coords to check for resize.
3053    left  : false,      // Disable resizing from left edge.
3054    bottom: '.resize-s',// Resize if pointer target matches selector
3055    right : handleEl    // Resize if pointer target is the given Element
3056  },
3057
3058    // Width and height can be adjusted independently. When `true`, width and
3059    // height are adjusted at a 1:1 ratio.
3060    square: false,
3061
3062    // Width and height can be adjusted independently. When `true`, width and
3063    // height maintain the aspect ratio they had when resizing started.
3064    preserveAspectRatio: false,
3065
3066  // a value of 'none' will limit the resize rect to a minimum of 0x0
3067  // 'negate' will allow the rect to have negative width/height
3068  // 'reposition' will keep the width/height positive by swapping
3069  // the top and bottom edges and/or swapping the left and right edges
3070  invert: 'none' || 'negate' || 'reposition'
3071
3072  // limit multiple resizes.
3073  // See the explanation in the <code>Interactable.draggable</code> example
3074  max: Infinity,
3075  maxPerElement: 1,
3076})
3077
3078var isResizeable = interact(element).resizable()
3079</code></pre>
3080<p>Gets or sets whether resize actions can be performed on the target</p>
3081</div>
3082
3083
3084
3085
3086
3087<dl class="details">
3088
3089    
3090
3091    
3092
3093    
3094
3095    
3096
3097    
3098
3099    
3100
3101    
3102
3103    
3104
3105    
3106
3107    
3108
3109    
3110
3111    
3112
3113    
3114    <dt class="tag-source">Source:</dt>
3115    <dd class="tag-source"><ul class="dummy"><li>
3116        <a href="packages_@interactjs_actions_resize_plugin.ts.html">packages/@interactjs/actions/resize/plugin.ts</a>, <a href="packages_@interactjs_actions_resize_plugin.ts.html#line65">line 65</a>
3117    </li></ul></dd>
3118    
3119
3120    
3121
3122    
3123
3124    
3125</dl>
3126
3127
3128
3129
3130
3131
3132
3133
3134
3135    <h5>Parameters:</h5>
3136    
3137
3138<table class="params">
3139    <thead>
3140    <tr>
3141        
3142        <th>Name</th>
3143        
3144
3145        <th>Type</th>
3146
3147        
3148        <th>Attributes</th>
3149        
3150
3151        
3152
3153        <th class="last">Description</th>
3154    </tr>
3155    </thead>
3156
3157    <tbody>
3158    
3159
3160        <tr>
3161            
3162                <td class="name"><code>options</code></td>
3163            
3164
3165            <td class="type">
3166            
3167                
3168<span class="param-type"><code>boolean</code></span>
3169|
3170
3171<span class="param-type"><code>object</code></span>
3172
3173
3174            
3175            </td>
3176
3177            
3178                <td class="attributes">
3179                
3180                    &lt;optional><br>
3181                
3182
3183                
3184
3185                
3186                </td>
3187            
3188
3189            
3190
3191            <td class="param-description last">
3192                <p>true/false or An object with event
3193listeners to be fired on resize events (object makes the Interactable
3194resizable)</p>
3195                
3196            </td>
3197        </tr>
3198
3199    
3200    </tbody>
3201</table>
3202
3203
3204
3205
3206
3207
3208
3209
3210
3211
3212
3213
3214
3215
3216<div class="section-returns">
3217<h5>Returns:</h5>
3218
3219        
3220
3221<dl class="param-type">
3222    <dt>
3223        Type:
3224    </dt>
3225    <dd>
3226        
3227<span class="param-type"><code>boolean</code></span>
3228|
3229
3230<span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span>
3231
3232
3233    </dd>
3234</dl>
3235
3236
3237<div class="param-desc">
3238    <p>A boolean indicating if this can be the
3239target of resize elements, or this Interactable</p>
3240</div>
3241
3242    
3243</div>
3244
3245
3246
3247</div>
3248
3249        
3250            
3251<div class="section-method">
3252
3253    
3254
3255    <h4 class="name" id="set"><span class="type-signature"></span>set<span class="signature">(options)</span><span class="type-signature"> &rarr; {object}</span></h4>
3256
3257    
3258
3259
3260
3261<div class="description">
3262    <p>Reset the options of this Interactable</p>
3263</div>
3264
3265
3266
3267
3268
3269<dl class="details">
3270
3271    
3272
3273    
3274
3275    
3276
3277    
3278
3279    
3280
3281    
3282
3283    
3284
3285    
3286
3287    
3288
3289    
3290
3291    
3292
3293    
3294
3295    
3296    <dt class="tag-source">Source:</dt>
3297    <dd class="tag-source"><ul class="dummy"><li>
3298        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line382">line 382</a>
3299    </li></ul></dd>
3300    
3301
3302    
3303
3304    
3305
3306    
3307</dl>
3308
3309
3310
3311
3312
3313
3314
3315
3316
3317    <h5>Parameters:</h5>
3318    
3319
3320<table class="params">
3321    <thead>
3322    <tr>
3323        
3324        <th>Name</th>
3325        
3326
3327        <th>Type</th>
3328
3329        
3330
3331        
3332
3333        <th class="last">Description</th>
3334    </tr>
3335    </thead>
3336
3337    <tbody>
3338    
3339
3340        <tr>
3341            
3342                <td class="name"><code>options</code></td>
3343            
3344
3345            <td class="type">
3346            
3347                
3348<span class="param-type"><code>object</code></span>
3349
3350
3351            
3352            </td>
3353
3354            
3355
3356            
3357
3358            <td class="param-description last">
3359                <p>The new settings to apply</p>
3360                
3361            </td>
3362        </tr>
3363
3364    
3365    </tbody>
3366</table>
3367
3368
3369
3370
3371
3372
3373
3374
3375
3376
3377
3378
3379
3380
3381<div class="section-returns">
3382<h5>Returns:</h5>
3383
3384        
3385
3386<dl class="param-type">
3387    <dt>
3388        Type:
3389    </dt>
3390    <dd>
3391        
3392<span class="param-type"><code>object</code></span>
3393
3394
3395    </dd>
3396</dl>
3397
3398
3399<div class="param-desc">
3400    <p>This Interactable</p>
3401</div>
3402
3403    
3404</div>
3405
3406
3407
3408</div>
3409
3410        
3411            
3412<div class="section-method">
3413
3414    
3415
3416    <h4 class="name" id="unset"><span class="type-signature"></span>unset<span class="signature">()</span><span class="type-signature"></span></h4>
3417
3418    
3419
3420
3421
3422<div class="description">
3423    <p>Remove this interactable from the list of interactables and remove it's
3424action capabilities and event listeners</p>
3425</div>
3426
3427
3428
3429
3430
3431<dl class="details">
3432
3433    
3434
3435    
3436
3437    
3438
3439    
3440
3441    
3442
3443    
3444
3445    
3446
3447    
3448
3449    
3450
3451    
3452
3453    
3454
3455    
3456
3457    
3458    <dt class="tag-source">Source:</dt>
3459    <dd class="tag-source"><ul class="dummy"><li>
3460        <a href="packages_@interactjs_core_Interactable.ts.html">packages/@interactjs/core/Interactable.ts</a>, <a href="packages_@interactjs_core_Interactable.ts.html#line415">line 415</a>
3461    </li></ul></dd>
3462    
3463
3464    
3465
3466    
3467
3468    
3469</dl>
3470
3471
3472
3473
3474
3475
3476
3477
3478
3479
3480
3481
3482
3483
3484
3485
3486
3487
3488
3489
3490
3491
3492
3493</div>
3494
3495        
3496    
3497
3498    
3499
3500    
3501</article>
3502
3503</section>
3504
3505
3506
3507
3508</div>
3509
3510<script>prettyPrint();</script>
3511<script src="scripts/linenumber.js"></script>
3512</body>
3513</html>
\No newline at end of file