Changeset 37467 for gs3-extensions/tabletop-dl/trunk/tabletop-interact.js
- Timestamp:
- 2023-03-12T17:47:25+13:00 (13 months ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/tabletop-dl/trunk/tabletop-interact.js
r37466 r37467 17 17 $(document).ready(function() { 18 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 19 26 20 interact('.resize-drag') … … 44 38 // call this function on every dragend event 45 39 end (event) { 46 var textEl = event.target.querySelector('p') 40 //var textEl = event.target.querySelector('p') 41 var textEl = $(event.target).find('.interact-info-bar')[0]; 47 42 48 43 textEl && (textEl.textContent = 49 ' moved a distance of' +44 'Moved a distance of: ' + 50 45 (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + 51 46 Math.pow(event.pageY - event.y0, 2) | 0)) 52 .toFixed( 2) + 'px')47 .toFixed(0) + ' pixels') 53 48 } 54 49 } … … 76 71 target.setAttribute('data-x', x) 77 72 target.setAttribute('data-y', y) 78 target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) 73 74 var textEl = $(event.target).find('.interact-info-bar')[0]; 75 textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels" 79 76 } 80 77 }, … … 170 167 } 171 168 }) 169 172 170 .draggable({ 173 171 inertia: true, … … 180 178 listeners: { move: dragMoveListener } 181 179 }) 180 181 /* 182 183 .draggable({ 184 // enable inertial throwing 185 inertia: true, 186 // keep the element within the area of it's parent 187 modifiers: [ 188 interact.modifiers.restrictRect({ 189 restriction: 'parent', 190 endOnly: true 191 }) 192 ], 193 // enable autoScroll 194 autoScroll: true, 195 196 listeners: { 197 // call this function on every dragmove event 198 move: dragMoveListener, 199 200 // call this function on every dragend event 201 end (event) { 202 var textEl = event.target.querySelector('p') 203 204 textEl && (textEl.textContent = 205 'moved a distance of ' + 206 (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + 207 Math.pow(event.pageY - event.y0, 2) | 0)) 208 .toFixed(2) + 'px') 209 } 210 } 211 }) 212 213 .resizable({ 214 // resize from all edges and corners 215 edges: { left: true, right: true, bottom: true, top: true }, 216 217 listeners: { 218 move (event) { 219 var target = event.target; 220 var x = (parseFloat(target.getAttribute('data-x')) || 0) 221 var y = (parseFloat(target.getAttribute('data-y')) || 0) 222 223 // update the element's style 224 target.style.width = event.rect.width + 'px' 225 target.style.height = event.rect.height + 'px' 226 227 // translate when resizing from top or left edges 228 x += event.deltaRect.left 229 y += event.deltaRect.top 230 231 target.style.transform = 'translate(' + x + 'px,' + y + 'px)' 232 233 target.setAttribute('data-x', x) 234 target.setAttribute('data-y', y) 235 target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) 236 } 237 }, 238 modifiers: [ 239 // keep the edges inside the parent 240 interact.modifiers.restrictEdges({ 241 outer: 'parent' 242 }), 243 244 // minimum size 245 interact.modifiers.restrictSize({ 246 min: { width: 100, height: 50 } 247 }) 248 ], 249 250 inertia: true 251 }); 252 253 */ 182 254 }); 183 255
Note:
See TracChangeset
for help on using the changeset viewer.