CSS & Javascript, *IMPORT FULL PAGE
“Working with [Your Company Name] was a game-changer for our business. Their attention to detail and commitment to excellence exceeded our expectations.”
draggable Moodboard
containing multiple layers
1. To make animation work, paste in ADVANCED SETTINGS > CUSTOM CSS:
.draggable { position: absolute; cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; } .draggable img { -webkit-user-drag: none; }
1. Additionally, copy and paste all code in ADVANCED SETTINGS > PAGE LOADED JAVASCRIPT:
(function () { // Walk up from the clicked element to the box Showit actually positions // (the nearest ancestor carrying inline left/top, or a .shwt-element / .shwt-group). function resolveTarget(el) { let node = el; while (node && node !== document.body) { const hasInlinePos = node.style && (node.style.left !== '' || node.style.top !== ''); if (hasInlinePos || node.matches('.shwt-element, .shwt-group')) return node; node = node.parentElement; } return el; // fallback: move the class element itself } function makeDraggable(handle) { const el = resolveTarget(handle); // the box we MOVE let dragging = false; let startX, startY, originX, originY; function currentPos() { const left = parseInt(el.style.left, 10); const top = parseInt(el.style.top, 10); return { x: isNaN(left) ? el.offsetLeft : left, y: isNaN(top) ? el.offsetTop : top }; } handle.addEventListener('pointerdown', function (e) { // listen on what you CLICK dragging = true; const pos = currentPos(); originX = pos.x; originY = pos.y; startX = e.clientX; startY = e.clientY; handle.setPointerCapture(e.pointerId); e.stopPropagation(); e.preventDefault(); }); handle.addEventListener('pointermove', function (e) { if (!dragging) return; el.style.left = (originX + (e.clientX - startX)) + 'px'; el.style.top = (originY + (e.clientY - startY)) + 'px'; }); function stop(e) { dragging = false; try { handle.releasePointerCapture(e.pointerId); } catch (err) {} } handle.addEventListener('pointerup', stop); handle.addEventListener('pointercancel', stop); } window.addEventListener('load', function () { document.querySelectorAll('.draggable').forEach(makeDraggable); }); })();