1 |
|
---|
2 | function dragMoveListener (event) {
|
---|
3 | var target = event.target
|
---|
4 | // keep the dragged position in the data-x/data-y attributes
|
---|
5 | var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
---|
6 | var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
---|
7 |
|
---|
8 | // translate the element
|
---|
9 | target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
---|
10 |
|
---|
11 | // update the posiion attributes
|
---|
12 | target.setAttribute('data-x', x)
|
---|
13 | target.setAttribute('data-y', y)
|
---|
14 | }
|
---|
15 |
|
---|
16 |
|
---|
17 | $(document).ready(function() {
|
---|
18 |
|
---|
19 |
|
---|
20 | //var resize_drag_elems = document.getElementsByClassName('resize-drag')
|
---|
21 |
|
---|
22 | //var resize_drag_elem = resize_drag_elems[0];
|
---|
23 |
|
---|
24 | //console.log(resize_drag_elem);
|
---|
25 |
|
---|
26 | interact('.resize-drag')
|
---|
27 | .draggable({
|
---|
28 | // enable inertial throwing
|
---|
29 | inertia: true,
|
---|
30 | // keep the element within the area of it's parent
|
---|
31 | modifiers: [
|
---|
32 | interact.modifiers.restrictRect({
|
---|
33 | restriction: 'parent',
|
---|
34 | endOnly: true
|
---|
35 | })
|
---|
36 | ],
|
---|
37 | // enable autoScroll
|
---|
38 | autoScroll: true,
|
---|
39 |
|
---|
40 | listeners: {
|
---|
41 | // call this function on every dragmove event
|
---|
42 | move: dragMoveListener,
|
---|
43 |
|
---|
44 | // call this function on every dragend event
|
---|
45 | end (event) {
|
---|
46 | var textEl = event.target.querySelector('p')
|
---|
47 |
|
---|
48 | textEl && (textEl.textContent =
|
---|
49 | 'moved a distance of ' +
|
---|
50 | (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
|
---|
51 | Math.pow(event.pageY - event.y0, 2) | 0))
|
---|
52 | .toFixed(2) + 'px')
|
---|
53 | }
|
---|
54 | }
|
---|
55 | })
|
---|
56 | .resizable({
|
---|
57 | // resize from all edges and corners
|
---|
58 | edges: { left: true, right: true, bottom: true, top: true },
|
---|
59 |
|
---|
60 | listeners: {
|
---|
61 | move (event) {
|
---|
62 | var target = event.target
|
---|
63 | var x = (parseFloat(target.getAttribute('data-x')) || 0)
|
---|
64 | var y = (parseFloat(target.getAttribute('data-y')) || 0)
|
---|
65 |
|
---|
66 | // update the element's style
|
---|
67 | target.style.width = event.rect.width + 'px'
|
---|
68 | target.style.height = event.rect.height + 'px'
|
---|
69 |
|
---|
70 | // translate when resizing from top or left edges
|
---|
71 | x += event.deltaRect.left
|
---|
72 | y += event.deltaRect.top
|
---|
73 |
|
---|
74 | target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
|
---|
75 |
|
---|
76 | target.setAttribute('data-x', x)
|
---|
77 | target.setAttribute('data-y', y)
|
---|
78 | target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
|
---|
79 | }
|
---|
80 | },
|
---|
81 | modifiers: [
|
---|
82 | // keep the edges inside the parent
|
---|
83 | interact.modifiers.restrictEdges({
|
---|
84 | outer: 'parent'
|
---|
85 | }),
|
---|
86 |
|
---|
87 | // minimum size
|
---|
88 | interact.modifiers.restrictSize({
|
---|
89 | min: { width: 100, height: 50 }
|
---|
90 | })
|
---|
91 | ],
|
---|
92 |
|
---|
93 | inertia: true
|
---|
94 | });
|
---|
95 |
|
---|
96 | /*
|
---|
97 | .draggable({
|
---|
98 | listeners: { move: window.dragMoveListener },
|
---|
99 | inertia: true,
|
---|
100 | modifiers: [
|
---|
101 | interact.modifiers.restrictRect({
|
---|
102 | restriction: 'parent',
|
---|
103 | endOnly: true
|
---|
104 | })
|
---|
105 | ]
|
---|
106 | })
|
---|
107 | */
|
---|
108 |
|
---|
109 |
|
---|
110 | // this function is used later in the resizing and gesture demos
|
---|
111 | window.dragMoveListener = dragMoveListener
|
---|
112 |
|
---|
113 |
|
---|
114 |
|
---|
115 |
|
---|
116 |
|
---|
117 |
|
---|
118 |
|
---|
119 |
|
---|
120 | var angleScale = {
|
---|
121 | angle: 0,
|
---|
122 | scale: 1
|
---|
123 | }
|
---|
124 | var gestureArea = document.getElementById('gesture-area')
|
---|
125 | var scaleElement = document.getElementById('scale-element')
|
---|
126 | //var resetTimeout
|
---|
127 |
|
---|
128 | interact(gestureArea)
|
---|
129 | .gesturable({
|
---|
130 | listeners: {
|
---|
131 | start (event) {
|
---|
132 | angleScale.angle -= event.angle
|
---|
133 |
|
---|
134 | //clearTimeout(resetTimeout)
|
---|
135 | //scaleElement.classList.remove('reset')
|
---|
136 | },
|
---|
137 | move (event) {
|
---|
138 | // document.body.appendChild(new Text(event.scale))
|
---|
139 | var currentAngle = event.angle + angleScale.angle
|
---|
140 | var currentScale = event.scale * angleScale.scale
|
---|
141 |
|
---|
142 | scaleElement.style.transform =
|
---|
143 | 'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
|
---|
144 |
|
---|
145 | // uses the dragMoveListener from the draggable demo above
|
---|
146 | dragMoveListener(event)
|
---|
147 | },
|
---|
148 | end (event) {
|
---|
149 | angleScale.angle = angleScale.angle + event.angle
|
---|
150 | angleScale.scale = angleScale.scale * event.scale
|
---|
151 |
|
---|
152 | //resetTimeout = setTimeout(reset, 1000)
|
---|
153 | //scaleElement.classList.add('reset')
|
---|
154 | }
|
---|
155 | }
|
---|
156 | })
|
---|
157 | .draggable({
|
---|
158 | inertia: true,
|
---|
159 | modifiers: [
|
---|
160 | interact.modifiers.restrictRect({
|
---|
161 | restriction: 'parent',
|
---|
162 | endOnly: true
|
---|
163 | })
|
---|
164 | ],
|
---|
165 | listeners: { move: dragMoveListener }
|
---|
166 | })
|
---|
167 |
|
---|
168 |
|
---|
169 | /*
|
---|
170 | function reset () {
|
---|
171 | scaleElement.style.transform = 'scale(1)'
|
---|
172 |
|
---|
173 | angleScale.angle = 0
|
---|
174 | angleScale.scale = 1
|
---|
175 | }
|
---|
176 | */
|
---|
177 |
|
---|
178 |
|
---|
179 |
|
---|
180 | });
|
---|