Draggable Moodboard

CSS & Javascript, *IMPORT FULL PAGE

Showit Canvas Shortcuts

These Are a Few of My Favorite Things

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;
}

2. 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);
});
})();