Instantly share code, notes, and snippets.

@afk-mcz /drag.js
Last active Jan 20, 2019

Embed
What would you like to do?
Drag And drop without target [es6]
// This snippet of code is based on
// https://www.kirupa.com/html5/drag.htm
// https://stackoverflow.com/questions/36098039/javascript-move-element-with-mousemove-event-60-fps-requestanimationframe
const GetClient = (e) => {
const { touches = [] } = e;
const [touch] = touches;
const client = touch || e;
return client;
};
class Drag {
constructor({ el = '', container = '' }) {
this.state = {
elSel: el,
containerSel: container,
el: undefined,
container: undefined,
active: false,
currentX: 0,
currentY: 0,
initialX: 0,
initialY: 0,
xOffset: 0,
yOffset: 0,
raf: true,
};
}
setState = (nState) => {
this.state = Object.assign(this.state, nState);
};
init = () => {
const { elSel, containerSel } = this.state;
const el = document.querySelector(elSel);
const container = document.querySelector(containerSel);
this.setState({ el });
this.setState({ container });
container.addEventListener('touchstart', this.start, false);
container.addEventListener('touchmove', this.move, false);
container.addEventListener('touchend', this.end, false);
container.addEventListener('mousedown', this.start, false);
container.addEventListener('mousemove', this.move, false);
container.addEventListener('mouseup', this.end, false);
};
setActive = (active) => {
const { el } = this.state;
// const scale = active ? 1.05 : 1;
if (active) el.classList.add('-active');
else el.classList.remove('-active');
this.setState({
active,
});
};
start = (e) => {
const { el } = this.state;
if (e.target !== el) return;
e.preventDefault();
const { clientX, clientY } = GetClient(e);
const { xOffset, yOffset } = this.state;
let newX = 0;
let newY = 0;
newX = clientX - xOffset;
newY = clientY - yOffset;
this.setState({ initialX: newX });
this.setState({ initialY: newY });
this.setActive(true);
};
end = () => {
const { currentX, currentY } = this.state;
this.setState({ initialX: currentX, initialY: currentY });
this.setActive(false);
};
move = (e) => {
const { active, raf } = this.state;
if (!active || !raf) return;
e.preventDefault();
const { clientX, clientY } = GetClient(e);
const { initialX, initialY } = this.state;
let currentX = 0;
let currentY = 0;
currentX = clientX - initialX;
currentY = clientY - initialY;
this.setState({
currentX,
currentY,
xOffset: currentX,
yOffset: currentY,
});
requestAnimationFrame(this.setTranslate);
};
setTranslate = () => {
const { currentX, currentY, el } = this.state;
this.setState({ raf: true });
el.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
};
}
export default Drag;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment