30:T999,{ const borderWidth = 2; const canvas = DOM.canvas(width - 2 * borderWidth, 200); const less = ` & { height: 300px; overflow: hidden; } canvas{ border: solid 2px gray; background: white; } -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; `; const div = scoped(html`${canvas}Drag to draw. Double tap to clear.`, less); var pixelSize = 16; async function drawImage() { const url = await FileAttachment("ijs-256.579dfa92.png").url(); const image = await new Promise(resolve => { const im = html``; im.onload = () => resolve(im); im.src = url; }); const ctx = canvas.getContext('2d'); ctx.drawImage( image, 0, 0, image.naturalWidth, image.naturalHeight, width / 2 - 50, 50, 100, 100 ); } await drawImage().then(() => interact('canvas') .draggable({ max: Infinity, maxPerElement: Infinity, origin: 'self', modifiers: [ interact.modifiers.snap({ // snap to the corners of a grid targets: [interact.snappers.grid({ x: pixelSize, y: pixelSize })] }) ], listeners: { // draw colored squares on move move: function(event) { var context = event.target.getContext('2d'); // calculate the angle of the drag direction var dragAngle = (180 * Math.atan2(event.dx, event.dy)) / Math.PI; // set color based on drag angle and speed context.fillStyle = 'hsl(' + dragAngle + ', 86%, ' + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)'; // draw squares context.fillRect( event.pageX - pixelSize / 2, event.pageY - pixelSize / 2, pixelSize, pixelSize ); } } }) // clear the canvas on doubletap .on('doubletap', function(event) { var context = event.target.getContext('2d'); context.clearRect(0, 0, context.canvas.width, context.canvas.height); }) ); // Remove the listener on cell invalidation // https://interactjs.io/docs/faq#remove-%2F-destroy-%2F-release invalidation.then(() => { interact('canvas').unset(); }); return div; }31:T8b1,{ const less = ` & { height: 300px; overflow: hidden; } .draggable { width: 25%; min-height: 1.5em; margin: 1em; background-color: #29e; color: white; border-radius: 0.75em; padding: 0.5em; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-transform: "translate(0px, 0px)"; transform: "translate(0px, 0px)"; } `; const dragDivs = [ html`

You can drag one element

`, html`

with each pointer

` ]; const div = scoped(dragDivs, less); // target elements with the "draggable" class interact('.draggable').draggable({ // enable inertial throwing inertia: true, // keep the element within the area of it's parent modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ], // enable autoScroll autoScroll: true, listeners: { // call this function on every dragmove event move(event) { var target = event.target; // keep the dragged position in the data-x/data-y attributes var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); }, // call this function on every dragend event end(event) { var textEl = event.target.querySelector('p'); textEl && (textEl.textContent = 'moved a distance of ' + Math.sqrt( (Math.pow(event.pageX - event.x0, 2) + Math.pow(event.pageY - event.y0, 2)) | 0 ).toFixed(2) + 'px'); } } }); invalidation.then(() => { interact('.draggable').unset(); }); return div; }32:Te05,{ const less = ` & { height: 300px; overflow: hidden; } #outer-dropzone { height: 140px; } #inner-dropzone { height: 80px; } .dropzone { background-color: #ccc; border: dashed 4px transparent; border-radius: 4px; margin: 10px auto 30px; padding: 10px; width: 80%; transition: background-color 0.3s; } .drop-active { border-color: #aaa; } .drop-target { background-color: #29e; border-color: #fff; border-style: solid; } .drag-drop { display: inline-block; min-width: 40px; padding: 2em 0.5em; color: #fff; background-color: #29e; border: solid 2px #fff; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: background-color 0.3s; } .drag-drop.can-drop { color: #000; background-color: #4e4; } `; const noDropDiv = html`

#no-drop

`; const yesDropDiv = html`

#yes-drop

`; const innerZone = html`

#inner-dropzone

`; const outerZone = html`

#outer-dropzone${innerZone}

`; const div = scoped([noDropDiv, yesDropDiv, outerZone], less); // enable draggables to be dropped into this interact('.dropzone').dropzone({ // only accept elements matching this CSS selector accept: '#yes-drop', // Require a 75% element overlap for a drop to be possible overlap: 0.75, // listen for drop related events: ondropactivate: function(event) { // add active dropzone feedback event.target.classList.add('drop-active'); }, ondragenter: function(event) { var draggableElement = event.relatedTarget; var dropzoneElement = event.target; // feedback the possibility of a drop dropzoneElement.classList.add('drop-target'); draggableElement.classList.add('can-drop'); draggableElement.textContent = 'Dragged in'; }, ondragleave: function(event) { // remove the drop feedback style event.target.classList.remove('drop-target'); event.relatedTarget.classList.remove('can-drop'); event.relatedTarget.textContent = 'Dragged out'; }, ondrop: function(event) { event.relatedTarget.textContent = 'Dropped'; }, ondropdeactivate: function(event) { // remove active dropzone feedback event.target.classList.remove('drop-active'); event.target.classList.remove('drop-target'); } }); interact('.drag-drop').draggable({ inertia: true, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ], autoScroll: true, // dragMoveListener from the dragging demo above listeners: { move: function(event) { var target = event.target; // keep the dragged position in the data-x/data-y attributes var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } } }); invalidation.then(() => { interact('.drag-drop').unset(); interact('.dropzone').unset(); }); return div; }33:T4ba,{ const less = ` & { height: 300px; overflow: hidden; } #grid-snap { width: 40%; background-color: #29e; color: #fff; font-size: 1.2em; border-radius: 4px; padding: 2%; margin: 5%; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; } `; const snap = html`

Dragging is constrained to the corners of a grid

`; const div = scoped(snap, less); var x = 0; var y = 0; interact('#grid-snap') .draggable({ modifiers: [ interact.modifiers.snap({ targets: [interact.createSnapGrid({ x: 30, y: 30 })], range: Infinity, relativePoints: [{ x: 0, y: 0 }] }), interact.modifiers.restrict({ restriction: div, elementRect: { top: 0, left: 0, bottom: 1, right: 1 }, endOnly: true }) ], inertia: true }) .on('dragmove', function(event) { x += event.dx; y += event.dy; event.target.style.webkitTransform = event.target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; }); invalidation.then(() => { interact('#grid-snap').unset(); }); return div; }34:Ta8c,{ const less = ` & { height: 300px; overflow: hidden; } .resize-drag { background-color: #29e; color: white; font-size: 20px; font-family: sans-serif; border-radius: 8px; padding: 20px; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; width: 120px; /* This makes things *much* easier */ box-sizing: border-box; } `; const drag = html`

Resize from any edge or corner

`; const div = scoped(drag, less); interact('.resize-drag') .resizable({ // resize from all edges and corners edges: { left: true, right: true, bottom: true, top: true }, listeners: { move(event) { var target = event.target; var x = parseFloat(target.getAttribute('data-x')) || 0; var y = parseFloat(target.getAttribute('data-y')) || 0; // update the element's style target.style.width = event.rect.width + 'px'; target.style.height = event.rect.height + 'px'; // translate when resizing from top or left edges x += event.deltaRect.left; y += event.deltaRect.top; target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px,' + y + 'px)'; target.setAttribute('data-x', x); target.setAttribute('data-y', y); target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height); } }, modifiers: [ // keep the edges inside the parent interact.modifiers.restrictEdges({ outer: 'parent' }), // minimum size interact.modifiers.restrictSize({ min: { width: 100, height: 50 } }) ], inertia: true }) .draggable({ listeners: { move: window.dragMoveListener }, inertia: true, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ] }); function dragMoveListener(event) { var target = event.target; // keep the dragged position in the data-x/data-y attributes var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } invalidation.then(() => { interact('.resize-drag').unset(); }); return div; }35:T9b7,{ const less = ` & { height: 300px; overflow: hidden; } #scale-element { display: block; max-width: 200px; margin: auto; touch-action: none; } #scale-element.reset { transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } `; const area = html`

`; const div = scoped(area, less); var angleScale = { angle: 0, scale: 1 }; var gestureArea = div.querySelector('#gesture-area'); var scaleElement = gestureArea.querySelector('#scale-element'); var resetTimeout; interact(gestureArea) .gesturable({ listeners: { start(event) { angleScale.angle -= event.angle; clearTimeout(resetTimeout); scaleElement.classList.remove('reset'); }, move(event) { // document.body.appendChild(new Text(event.scale)) var currentAngle = event.angle + angleScale.angle; var currentScale = event.scale * angleScale.scale; scaleElement.style.webkitTransform = scaleElement.style.transform = 'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'; dragMoveListener(event); }, end(event) { angleScale.angle = angleScale.angle + event.angle; angleScale.scale = angleScale.scale * event.scale; resetTimeout = setTimeout(reset, 1000); scaleElement.classList.add('reset'); } } }) .draggable({ listeners: { move: dragMoveListener } }); function reset() { scaleElement.style.webkitTransform = scaleElement.style.transform = 'scale(1)'; angleScale.angle = 0; angleScale.scale = 1; } function dragMoveListener(event) { var target = event.target; // keep the dragged position in the data-x/data-y attributes var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } invalidation.then(() => { interact('#gesture-area').unset(); }); return div; }36:T5a9,{ const less = ` & { height: 300px; overflow: hidden; } .tap-target { display: flex; flex-direction: column; justify-content: center; width: 240px; height: 200px; padding: 1em; margin: 10px auto; border-radius: 100%; font-size: 1.125em; text-align: center; color: #fff; background-color: #29e; cursor: pointer; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; transition: all 0.3s; } .tap-target.switch-bg { background-color: #f40; } .tap-target.large { -webkit-transform: scale(1.25); transform: scale(1.25); } .rotate { -webkit-transform: rotate(180deg); transform: rotate(180deg); } `; const target = html`

Tap to change color

Doubletap to change size

Hold to rotate

`; const div = scoped(target, less); interact('.tap-target') .on('tap', function(event) { event.currentTarget.classList.toggle('switch-bg'); event.preventDefault(); }) .on('doubletap', function(event) { event.currentTarget.classList.toggle('large'); event.currentTarget.classList.remove('rotate'); event.preventDefault(); }) .on('hold', function(event) { event.currentTarget.classList.toggle('rotate'); event.currentTarget.classList.remove('large'); }); invalidation.then(() => { interact('.tap-target').unset(); }); return div; }37:Ta41,{ const less = ` & { height: 300px; overflow: hidden; } .item { width: 40%; background-color: #29e; color: #fff; font-size: 1.2em; border-radius: 4px; padding: 2%; margin: 5%; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; } `; const drag = html`

Drag me to create a new item

`; const div = scoped(drag, less, { wrapperIdPrefix: 'clone-target-draggable' }); const divId = div.getAttribute('id'); interact(`#${divId} .item`).draggable({ modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ], inertia: true, listeners: { // call this function on every dragmove event move(event) { var target = event.target; // keep the dragged position in the data-x/data-y attributes var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } } }); interact(`#${divId} .item`) .draggable({ manualStart: true }) .on('move', function(event) { var interaction = event.interaction; // if the pointer was moved while being held down // and an interaction hasn't started yet if (interaction.pointerIsDown && !interaction.interacting()) { var original = event.currentTarget, // create a clone of the currentTarget element clone = original.cloneNode(true); // insert the clone to the page // TODO: position the clone appropriately div.appendChild(clone); const x = (parseFloat(original.getAttribute('data-x')) || 0) + original.offsetLeft - clone.offsetLeft; const y = (parseFloat(original.getAttribute('data-y')) || 0) + original.offsetTop - clone.offsetTop; clone.setAttribute('data-x', x); clone.setAttribute('data-y', y); clone.style.webkitTransform = clone.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // start a drag interaction targeting the clone interaction.start({ name: 'drag' }, event.interactable, clone); } }); invalidation.then(() => { interact(`#${divId} .item`).unset(); }); return div; }38:Tbf6,{ // FOLLOW HERE // The idea is to: // drag the background to create a new Item. At drag start, the item is created, and a resize interaction is started on that item immediately in order to set its size. // Then, we also want to add drag behavior on the items in order to move them, and resize behavior to resize them const less = ` & { height: 300px; overflow: hidden; } .item { background-color: #29e; color: #fff; font-size: 1.2em; border-radius: 4px; padding: 2%; margin: 5%; -webkit-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; } `; const div = scoped([], less, { wrapperIdPrefix: 'create-resize' }); const divId = div.getAttribute('id'); interact(`#${divId}`).draggable({ //manualStart: true, hold: 1000, listeners: { move(event) { //.on('move', function(event) { var interaction = event.interaction; // if the pointer was moved while being held down // and an interaction hasn't started yet if (interaction.pointerIsDown && !interaction.interacting()) { const container = event.currentTarget; const newItem = container.appendChild( html`

new item

` ); const x = container.offsetLeft + event.offsetX - newItem.offsetLeft; const y = container.offsetTop + event.offsetY - newItem.offsetTop; newItem.setAttribute('data-x', x); newItem.setAttribute('data-y', y); newItem.style.webkitTransform = newItem.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // attach listeners interact(newItem).draggable({ manualStart: false, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ], inertia: true, listeners: { // call this function on every dragmove event move(event) { var target = event.target; // keep the dragged position in the data-x/data-y attributes var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } } }); // start a drag interaction targeting the clone interaction.start({ name: 'drag' }, event.interactable, newItem); } event.preventDefault(); } } }); invalidation.then(() => { interact(`#${divId}`).unset(); interact(`#${divId} .item`).unset(); }); return div; }39:[{"id":"a27ce46dbd25129e854c37ab8c5f0c3883fe0e107bc1d455df3bceac85f48a323fc377ffcfe7578b912cbb487d263db2b5c91fe6dd23165a79972eecc7a62973","href":"https://static.observableusercontent.com/files/a27ce46dbd25129e854c37ab8c5f0c3883fe0e107bc1d455df3bceac85f48a323fc377ffcfe7578b912cbb487d263db2b5c91fe6dd23165a79972eecc7a62973","name":"ijs-256.579dfa92.png","type":"image/png","lastModified":1589894459444.198,"size":10129}] 2e:{"title":"Hello interact.js","cells":[{"id":0,"value":"md`# Hello interact.js\n\n> JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)\n\nhttps://interactjs.io/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`## Examples from interactjs.io`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Here's a simple pixel drawing app with interact.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Dragging`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`### Drag and drop `","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Snapping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`### Resizing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`### Multi-touch Rotation (touchscreen only) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"{\n const less = `\n& {\n height: 300px;\n overflow: hidden;\n}\n\n#rotate-area {\n margin: 3em;\n overflow: hidden;\n touch-action: none;\n}\n\n#arrow {\n width: 200px;\n height: 200px;\n}\n\n#angle-info {\n color: #666;\n font-size: 2em;\n position: absolute;\n}\n`;\n\n const rotate = html`\n

0°

\n \n

\n`;\n\n const div = scoped(rotate, less);\n\n var angle = 0;\n\n interact('#rotate-area').gesturable({\n listeners: {\n move(event) {\n var arrow = document.getElementById('arrow');\n\n angle += event.da;\n\n arrow.style.webkitTransform = arrow.style.transform =\n 'rotate(' + angle + 'deg)';\n\n document.getElementById('angle-info').textContent =\n angle.toFixed(2) + '\\u00b0';\n }\n }\n });\n\n invalidation.then(() => {\n interact('#rotate-area').unset();\n });\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`### Pinch-to-zoom (touchscreen only)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`### Tap, doubletap and hold`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`## More examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`### Clone target draggable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`### Create and resize`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"interact = require('interactjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"import { scoped } from '@severo/scoped-css'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}