1 |
|
2 | import { interact } from 'interact.js/interact'
|
3 |
|
4 |
|
5 | interact('.drag-and-resize')
|
6 | .draggable({
|
7 | snap: {
|
8 | targets: [
|
9 | { x: 100, y: 200 },
|
10 | function (x, y) { return { x: x % 20, y: y }; }
|
11 | ]}
|
12 | })
|
13 | .resizable({
|
14 | inertia: true
|
15 | });
|
16 |
|
17 |
|
18 | var myList = document.querySelector('#my-list');
|
19 |
|
20 | interact('li', {
|
21 | context: myList
|
22 | })
|
23 | .draggable({ });
|
24 |
|
25 |
|
26 | var target = 'li'
|
27 | interact(target)
|
28 | .draggable({
|
29 | max : 1,
|
30 | maxPerElement: 2,
|
31 | manualStart : true,
|
32 | snap : {},
|
33 | restrict : {},
|
34 | inertia : {},
|
35 | autoScroll : {},
|
36 |
|
37 | axis : 'x' || 'y'
|
38 |
|
39 | })
|
40 | .resizable({
|
41 | max : 1,
|
42 | maxPerElement: 2,
|
43 | manualStart : true,
|
44 | snap : {},
|
45 | restrict : {},
|
46 | inertia : {},
|
47 | autoScroll : {},
|
48 |
|
49 | square : true || false,
|
50 | axis : 'x' || 'y'
|
51 | })
|
52 | .gesturable({
|
53 | max : 1,
|
54 | maxPerElement: 2,
|
55 | manualStart : true,
|
56 | restrict : {}
|
57 | });
|
58 |
|
59 |
|
60 | var element = 'li'
|
61 | interact(element)
|
62 | .draggable({
|
63 | autoScroll: true,
|
64 | })
|
65 | .resizable({
|
66 | autoScroll: {
|
67 | container: document.body,
|
68 | margin: 50,
|
69 | distance: 5,
|
70 | interval: 10
|
71 | }
|
72 | });
|
73 |
|
74 |
|
75 | interact(target).draggable({
|
76 | axis: 'x'
|
77 | });
|
78 |
|
79 | interact(target).resizable({
|
80 | axis: 'x'
|
81 | });
|
82 |
|
83 | var handleEl = 'li'
|
84 | interact(target).resizable({
|
85 | edges: {
|
86 | top : true,
|
87 | left : false,
|
88 | bottom: '.resize-s',
|
89 | right : handleEl
|
90 | }
|
91 | });
|
92 |
|
93 |
|
94 | interact(target).resizable({
|
95 | edges: { bottom: true, right: true },
|
96 | invert: 'reposition'
|
97 | });
|
98 |
|
99 |
|
100 | interact(target).resizable({
|
101 | squareResize: true
|
102 | });
|
103 |
|
104 |
|
105 | interact(target).dropzone({
|
106 | accept: '.drag0, .drag1',
|
107 | });
|
108 |
|
109 |
|
110 | interact(target).dropzone({
|
111 | overlap: 0.25
|
112 | });
|
113 |
|
114 |
|
115 | interact(target).dropzone({
|
116 | checker: function (dragEvent,
|
117 | event,
|
118 | dropped,
|
119 | dropzone,
|
120 | dropElement,
|
121 | draggable,
|
122 | draggableElement) {
|
123 |
|
124 |
|
125 |
|
126 | return dropped && !dropElement.hasChildNodes();
|
127 | }
|
128 | });
|
129 |
|
130 |
|
131 | function listener (event) {
|
132 | console.log(event.type, event.pageX, event.pageY);
|
133 | }
|
134 |
|
135 |
|
136 | interact(target)
|
137 | .on('dragstart', listener)
|
138 |
|
139 |
|
140 | .on(['resizemove', 'resizeend'], listener)
|
141 | .on({
|
142 | gesturestart: listener,
|
143 | gestureend: listener
|
144 | });
|
145 |
|
146 |
|
147 |
|
148 | interact(target).draggable({
|
149 | onstart: listener,
|
150 | onmove: listener,
|
151 | onend: listener
|
152 | });
|
153 |
|
154 | interact.on(['dragmove', 'resizestart'], function (event) {
|
155 | console.log(event.type, event.pageX, event.pageY);
|
156 | });
|
157 |
|
158 | var dropTarget = 'div'
|
159 |
|
160 | interact(dropTarget)
|
161 | .dropzone({
|
162 | ondrop: function (event) {
|
163 | alert(event.relatedTarget.id
|
164 | + ' was dropped into '
|
165 | + event.target.id);
|
166 | }
|
167 | })
|
168 | .on('dropactivate', function (event) {
|
169 | event.target.classList.add('drop-activated');
|
170 | });
|
171 |
|
172 | interact(target).on('up', function (event) {});
|
173 |
|
174 |
|
175 | interact('a[href]').on('tap', function (event) {
|
176 | window.location.href = event.currentTarget.href;
|
177 |
|
178 | event.preventDefault();
|
179 | });
|